0

Here is the html form usees html file to upload image...

<html>
    <head>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>
<body>


<form method="" action="" enctype="multipart/form-data" id="eventImageForm">
    <label for="event"><p><b>Update Event Below: </b></p></label>
    <input type="text"   class="eventTextBox"    id="updateEvent"    name="event"  placeholder="Update Event" />
    <input type="file" id="eventUpdateImgFile" name="updateEventImageFile" />
    <input type="submit" class="eventUpdateBtn"  id="btnUpdate"      name="eventUpdateSubmit" value="Update"></input>
</form>

<div class="updateResult">

</div>

Here is the jquery ajax code below which receives html file info from the html form above and i want to get the details of the file element when user clicks the update button. when the upload is successful...

<script>
        $(document).ready(function(){
            $("#btnUpdate").click(function(e){
                e.preventDefault();
                var formData = new FormData($("#eventImageForm")[0]);
                $.ajax({
                    url: "update.php",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(){
                        //Here i want the file element upload details to be displayed...
                        $(".updateResult").css('display', 'block').html("Data Updated ");
                    }
                })
            });
        });         
</script>

</body>
</html>

Please can anyone help me how to get the file details... please...

manoj03h
  • 37
  • 7
  • Possible duplicate of [Get HTML5 file details with javascript/Jquery?](https://stackoverflow.com/questions/29168920/get-html5-file-details-with-javascript-jquery) – vahdet Aug 27 '18 at 14:31
  • The `success` function should be something like `success: function(result)`. The actual data returned will be whats returned from your server call, whether it's JSON or HTML etc. Maybe you should post the details of `update.php` so people have an idea of whats being returned. – Steve Aug 27 '18 at 14:36
  • Additionally I don't think you can upload files via the jQuery ajax or any ajax call without hacks. https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – Steve Aug 27 '18 at 14:40
  • @Steve you can do file upload via ajax in php but not in asp – Ahmed Sunny Aug 27 '18 at 14:44
  • 1
    @AhmedSunny No you can't this is a browser/javascript limitation, although I did point to workarounds. – Steve Aug 27 '18 at 14:45
  • i don't know what exactly you mean, but i do itby appending formdata, get files by id and append to formdata,works for multiple files also @Steve – Ahmed Sunny Aug 27 '18 at 14:48
  • 1
    @AhmedSunny I didn't notice the Formdata part, however this isn't supported by all/older browsers. https://developer.mozilla.org/en-US/docs/Web/API/FormData – Steve Aug 27 '18 at 14:52
  • 1
    @AhmedSunny All modern server-side frameworks can handle file uploads through ajax, include "asp". – Heretic Monkey Aug 27 '18 at 14:52
  • 1
    If you want details of the file after upload, have your server return details about the file after upload. – Heretic Monkey Aug 27 '18 at 14:54

1 Answers1

0
success: function(data){
  // data is the returned value

So, you need to return the path of the uploaded image and load it with ajax

$('.updateResult').append('<img src="'+data+'" />')

Source: http://api.jquery.com/jquery.ajax/

Roy Bogado
  • 4,299
  • 1
  • 15
  • 31