使用ajax和JavaScript函数上传文件[重复]

Question

This question already has an answer here:

• How can I upload files asynchronously? 33 answers

Need a big favor! I'm trying to send uploaded file using JavaScript & Ajax, however not getting any success.

I want that when I upload the file, it will call the function myFunction(), and send the file to the PHP path(ajax.php) I've set.

Below is the code I've so far.

<script>
   function myFunction() {
      var x = document.getElementById("up");
      $.ajax({
         type: 'GET',
         url: 'ajax.php',
         data: {},
         beforeSend: function() {},
         success: function(data) {
            alert(data);
         }
      });
   }
</script>
<input type="file" name="images" id="up" onchange="myFunction()" />

</div>

Answer 1

Uploading files with Jquery and Ajax is a little tricky, but it is something that is already fairly well documented. A quick google search returns a fairly good example of this https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

The most important part is obtaining the formdata. Javascript can grab the file elements and build a FormData object from it. From the example above

$('input[type=file]').on('change', prepareUpload);
function prepareUpload(event)
{
  files = event.target.files;
}

You can then build the form object and use that as the data component of your ajax request.

var data = new FormData();
$.each(files, function(key, value)
{
    data.append(key, value);
});