xmlhttprequest - javascript - Ajax form upload file - 我怎样才能异步上传文件?

jQuery-file Upload exploit / javascript / jquery / ajax / asynchronous

我想用jQuery异步上传一个文件。

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Hitesh Tripathi



Answer #1

如果支持FormDataFile API(均具有HTML5功能),则可以使用 $.ajax() 方法使用jQuery上传文件。

您还可以发送不带FormData的文件,但是必须以两种方式发送文件API来处理文件,以便可以使用XMLHttpRequest(Ajax)发送文件。

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), //带有文件输入的表单。
  processData: false,
  contentType: false                    //使用FormData,无需处理数据。
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});
$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  //设置要使用的运输方式(iframe表示要使用Bifröst)
  //和期望的数据类型(在这种情况下为json)。
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  //包含要发送文件的文件输入。
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});