如何使用 jQuery 异步上传文件？

使用 HTML5，您可以使用 Ajax 和 jQuery 进行文件上传。不仅如此，您还可以进行文件验证（名称、大小和 MIME 类型）或使用 HTML5 进度标记（或 div）处理进度事件。最近我不得不制作一个文件上传器，但我不想使用 Flash 也不想使用 iframe 或插件，经过一番研究，我想出了解决方案。

的HTML：

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

首先，您可以根据需要进行一些验证。例如，在文件的 .on('change') 事件中：

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

现在点击按钮提交 $.ajax()：

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

如您所见，使用 HTML5（和一些研究）文件上传不仅变得可能而且超级容易。尝试使用 Google Chrome，因为示例的某些 HTML5 组件并非在所有浏览器中都可用。

---

2019 年更新：这仍然取决于您的人口统计使用的浏览器。

了解“新”HTML5 file API 的重要一点是它wasn't supported until IE 10。如果您瞄准的特定市场对旧版本 Windows 的倾向高于平均水平，您可能无法访问它。

截至 2017 年，大约 5% 的浏览器是 IE 6、7、8 或 9 之一。如果你进入一家大公司（例如，这是一个 B2B 工具或你提供的培训工具），这个数字可能会飙升。 2016 年，我与一家公司打交道，他们 60% 以上的机器都使用 IE8。

到本次编辑时是 2019 年，距离我最初的回答已经过去了将近 11 年。 IE9 及更低版本的全球使用率在 1% 左右，但仍有较高使用率的集群。

从中获得的重要收获（无论功能如何）是，检查您的用户使用的浏览器。如果你不这样做，你将快速而痛苦地学到为什么“为我工作”在交付给客户时不够好。 caniuse 是一个有用的工具，但请注意他们从何处获取人口统计数据。它们可能与您的不一致。这从来没有比企业环境更真实。

我在 2008 年的回答如下。

但是，有一些可行的非 JS 文件上传方法。您可以在页面上创建一个 iframe（使用 CSS 隐藏），然后将表单定位到该 iframe。主页不需要移动。

这是一个“真实”的帖子，所以它不是完全互动的。如果您需要状态，则需要在服务器端进行处理。这取决于您的服务器。 ASP.NET 有更好的机制。 PHP plain 失败，但您可以使用 Perl 或 Apache 修改来绕过它。

如果您需要上传多个文件，最好一次上传一个文件（以克服最大文件上传限制）。将第一个表单发布到 iframe，使用上述方法监视其进度，完成后，将第二个表单发布到 iframe，依此类推。

或者使用 Java/Flash 解决方案。他们可以更灵活地处理他们的帖子......

---

为此，我建议使用 Fine Uploader 插件。您的 JavaScript 代码将是：

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

---

注意：此答案已过时，现在可以使用 XHR 上传文件。

您无法使用 XMLHttpRequest (Ajax) 上传文件。您可以使用 iframe 或 Flash 模拟效果。优秀的 jQuery Form Plugin 通过 iframe 发布您的文件以获得效果。

---

为未来的读者总结。

异步文件上传

使用 HTML5

如果支持 FormData 和 File API（两种 HTML5 功能），您可以使用 $.ajax() 方法使用 jQuery 上传文件。

您也可以发送文件 without FormData，但无论哪种方式，文件 API 都必须存在以处理文件，以便它们可以通过 XMLHttpRequest (Ajax) 发送。

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

如需快速、纯 JavaScript（无 jQuery）示例，请参阅“Sending files using a FormData object”。

倒退

当不支持 HTML5（无 File API）时，唯一的其他纯 JavaScript 解决方案（无 Flash 或任何其他浏览器插件）是隐藏 iframe 技术，它允许在不使用 XMLHttpRequest 对象的情况下模拟异步请求。

它包括使用文件输入将 iframe 设置为表单的目标。当用户提交请求并上传文件时，响应显示在 iframe 内，而不是重新呈现主页。隐藏 iframe 使整个过程对用户透明并模拟异步请求。

如果处理得当，它几乎可以在任何浏览器上运行，但它有一些关于如何从 iframe 获取响应的警告。

在这种情况下，您可能更喜欢使用像 Bifröst 这样的包装插件，它使用 iframe 技术，但还提供了一个 jQuery Ajax transport，允许仅使用 $.ajax()send files像这样的方法：

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  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!");
});

插件

Bifröst 只是一个小型包装器，它为 jQuery 的 ajax 方法添加了回退支持，但许多上述插件（如 jQuery Form Plugin 或 jQuery File Upload）包含从 HTML5 到不同回退的整个堆栈以及一些有用的功能来简化流程。根据您的需要和要求，您可能需要考虑裸实现或其中任何一个插件。

---

此 AJAX file upload jQuery plugin 上传文件，并将响应传递给回调，仅此而已。

它不依赖于特定的 HTML，只需给它一个

它不需要您的服务器以任何特定方式响应

使用多少文件或它们在页面上的位置都没有关系

-- 少用 --

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

——或多于——

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

---

我一直在使用下面的脚本来上传恰好可以正常工作的图像。

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

JavaScript

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

解释

我使用响应 div 来显示上传动画和上传完成后的响应。

最好的部分是您可以发送额外的数据，例如 ids &等使用此脚本时的文件。我在脚本中提到了它extra-data。

在 PHP 级别，这将像正常的文件上传一样工作。额外数据可以作为 $_POST 数据检索。

在这里，您没有使用插件和东西。您可以根据需要更改代码。您不是在这里盲目编码。这是任何 jQuery 文件上传的核心功能。实际上是Javascript。

---

你可以很容易地在 vanilla JavaScript 中做到这一点。这是我当前项目的一个片段：

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);

---

您可以简单地使用 jQuery .ajax() 上传。

HTML：

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

CSS

.progress { display: none; }

Javascript：

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});

---

我过去做过的最简单和最可靠的方法是简单地将隐藏的 iFrame 标记与您的表单一起定位 - 然后它将在 iframe 内提交而无需重新加载页面。

也就是说，如果您不想使用插件、JavaScript 或 HTML 以外的任何其他形式的“魔法”。当然，你可以将它与 JavaScript 或你有什么结合起来......

<form target="iframe" action="" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

<iframe name="iframe" id="iframe" style="display:none" ></iframe>

您还可以读取 iframe onLoad 的内容以了解服务器错误或成功响应，然后将其输出给用户。

Chrome、iFrame 和 onLoad

-注意-如果您对如何在上传/下载时设置 UI 阻止程序感兴趣，您只需要继续阅读

目前，Chrome 在用于传输文件时不会触发 iframe 的 onLoad 事件。 Firefox、IE 和 Edge 都会触发文件传输的 onload 事件。

我发现适用于 Chrome 的唯一解决方案是使用 cookie。

基本上在开始上传/下载时做到这一点：

[Client Side] 启动一个间隔来寻找cookie的存在

[服务器端] 对文件数据做任何你想做的事

[服务器端] 为客户端间隔设置 cookie

[客户端] Interval 看到 cookie 并像 onLoad 事件一样使用它。例如，您可以启动 UI 阻止程序，然后 onLoad（或在制作 cookie 时）删除 UI 阻止程序。

为此使用 cookie 很难看，但它确实有效。

我在下载时为 Chrome 制作了一个 jQuery 插件来处理这个问题，你可以在这里找到

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

同样的基本原则也适用于上传。

使用下载器（显然包括 JS）

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //block the UI
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

在服务器端，就在传输文件数据之前，创建 cookie

 setcookie('iDownloader', true, time() + 30, "/");

插件将看到 cookie，然后触发 onComplete 回调。

---

I've written this up in a Rails environment。如果你使用轻量级的 jQuery-form 插件，它只有大约五行 JavaScript。

挑战在于让 AJAX 上传工作，因为标准 remote_form_for 不理解多部分表单提交。它不会发送 Rails 通过 AJAX 请求返回的文件数据。

这就是 jQuery-form 插件发挥作用的地方。

这是它的 Rails 代码：

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

这是相关的 JavaScript：

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

这是 Rails 控制器动作，非常普通：

 @image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

在过去的几周里，我一直在用 Bloggity 使用它，它的工作就像一个冠军。

---

Simple Ajax Uploader 是另一种选择：

https://github.com/LPology/Simple-Ajax-Uploader

跨浏览器 -- 适用于 IE7+、Firefox、Chrome、Safari、Opera

支持多个并发上传——即使在非 HTML5 浏览器中

没有 Flash 或外部 CSS——只有一个 5Kb Javascript 文件

对完全跨浏览器进度条的可选内置支持（使用 PHP 的 APC 扩展）

灵活且高度可定制——使用任何元素作为上传按钮，设置自己的进度指示器

不需要表格，只需提供一个元素作为上传按钮

MIT 许可证——在商业项目中免费使用

示例用法：

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

---

我发现的一个解决方案是让 <form> 定位一个隐藏的 iFrame。然后 iFrame 可以运行 JS 向用户显示它已完成（在页面加载时）。

---

这只是如何上传文件的另一种解决方案（没有任何插件）

使用简单的 Javascript 和 AJAX（带进度条）

HTML 部分

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

JS部分

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

PHP部分

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

Here's the EXAMPLE application

---

jQuery Uploadify 是我之前用来上传文件的另一个好插件。 JavaScript 代码很简单，如下所示：代码。但是，新版本无法在 Internet Explorer 中使用。

$('#file_upload').uploadify({
    'swf': '/public/js/uploadify.swf',
    'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
    'cancelImg': '/public/images/uploadify-cancel.png',
    'multi': true,
    'onQueueComplete': function (queueData) {
        // ...
    },
    'onUploadStart': function (file) {
        // ...
    }
});

我做了很多搜索，我找到了另一种上传文件的解决方案，无需任何插件，仅使用 ajax。解决方案如下：

$(document).ready(function () {
    $('#btn_Upload').live('click', AjaxFileUpload);
});

function AjaxFileUpload() {
    var fileInput = document.getElementById("#Uploader");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'Uploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}

---

var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

您可以使用表单数据发布所有值，包括图像。

---

没有 Jquery 的现代方法是在用户选择文件时使用从 <input type="file"> 返回的 FileList 对象，然后使用 Fetch 发布包裹在 {3 } 目的。

// The input DOM element // <input type="file">
const inputElement = document.querySelector('input[type=file]');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData();
    data.append('file', inputElement.files[0]);
    data.append('imageName', 'flower');

    // You can then post it to your server.
    // Fetch can accept an object of type FormData on its  body
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    });
});

---

要使用 Jquery 异步上传文件，请使用以下步骤：

步骤 1 在您的项目中打开 Nuget 管理器并添加包（jquery 文件上传（只需要在搜索框中写入它就会出现并安装它。））网址：https://github.com/blueimp/jQuery-File-Upload

步骤 2 在 HTML 文件中添加以下脚本，这些脚本已经通过运行上述包添加到项目中：

jquery.ui.widget.js jquery.iframe-transport.js jquery.fileupload.js

步骤 3 按照以下代码编写文件上传控件：

<input id="upload" name="upload" type="file" />

第4步编写一个js方法作为uploadFile如下：

 function uploadFile(element) {
    
            $(element).fileupload({
    
                dataType: 'json',
                url: '../DocumentUpload/upload',
                autoUpload: true,
                add: function (e, data) {           
                  // write code for implementing, while selecting a file. 
                  // data represents the file data. 
                  //below code triggers the action in mvc controller
                  data.formData =
                                    {
                                     files: data.files[0]
                                    };
                  data.submit();
                },
                done: function (e, data) {          
                   // after file uploaded
                },
                progress: function (e, data) {
                    
                   // progress
                },
                fail: function (e, data) {
                    
                   //fail operation
                },
                stop: function () {
                    
                  code for cancel operation
                }
            });
        
        };

步骤 5 在准备好的函数调用元素文件上传以启动流程，如下所示：

$(document).ready(function()
{
    uploadFile($('#upload'));

});

步骤 6 编写 MVC 控制器和操作，如下所示：

public class DocumentUploadController : Controller
    {       
        
        [System.Web.Mvc.HttpPost]
        public JsonResult upload(ICollection<HttpPostedFileBase> files)
        {
            bool result = false;

            if (files != null || files.Count > 0)
            {
                try
                {
                    foreach (HttpPostedFileBase file in files)
                    {
                        if (file.ContentLength == 0)
                            throw new Exception("Zero length file!");                       
                        else 
                            //code for saving a file

                    }
                }
                catch (Exception)
                {
                    result = false;
                }
            }


            return new JsonResult()
                {
                    Data=result
                };


        }

    }

---

您可以通过工作演示查看已解决的解决方案 here，该演示允许您预览表单文件并将其提交到服务器。对于您的情况，您需要使用 Ajax 来促进文件上传到服务器：

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

提交的数据是一个表单数据。在您的 jQuery 上，使用表单提交功能而不是单击按钮来提交表单文件，如下所示。

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

View more details

---

这是我的解决方案。

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

和js

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

控制器

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    [...]
}

---

您可以使用

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

Demo

---

示例：如果您使用 jQuery，您可以轻松上传文件。这是一个小巧而强大的 jQuery 插件，http://jquery.malsup.com/form/。

例子

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

我希望它会有所帮助

---

使用 |HTML5 的 readAsDataURL() 或 some base64 encoder 将文件转换为 base64。 Fiddle here

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

然后检索：

window.open("data:application/octet-stream;base64," + base64);

---

您可以在使用 XMLHttpRequest（不依赖 flash 和 iframe）进行异步上传时传递附加参数和文件名。将附加参数值附加到 FormData 并发送上传请求。

var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2'); 
formData.append('file', $('input[type=file]')[0].files[0]);

$.ajax({
    url: 'post back url',
    data: formData,
// other attributes of AJAX
});

此外，Syncfusion JavaScript UI 文件上传为这种场景提供了解决方案，只需使用事件参数。您可以在此处找到文档 here 和有关此控件的更多详细信息，输入链接描述 here

---

在此处查找异步处理文件的上传过程：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

来自链接的示例

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>

---

您可以通过 JavaScript 使用 newer Fetch API。像这样：

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // you can do something with response
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
}                               

优势：所有现代浏览器都原生支持 Fetch API，因此您无需导入任何内容。另外，请注意 fetch() 返回一个 Promise，然后通过使用 .then(..code to handle response..) 异步处理。

---

使用 HTML5 和 JavaScript，上传异步非常简单，我与您的 html 一起创建了上传逻辑，这并不能完全工作，因为它需要 api，但演示它是如何实现的有效，如果您的网站根目录中有名为 /upload 的端点，则此代码应该适合您：

const asyncFileUpload = () => { const fileInput = document.getElementById("file");常量文件 = fileInput.files[0];常量 uri = "/上传"; const xhr = new XMLHttpRequest(); xhr.upload.onprogress = e => { 常量百分比 = e.loaded / e.total;控制台.log（百分比）； }; xhr.onreadystatechange = e => { if (xhr.readyState === 4 && xhr.status === 200) { console.log("文件上传"); } }; xhr.open("POST", uri, true); xhr.setRequestHeader("X-FileName", file.name); xhr.send(文件); }

文件

还有一些关于 XMLHttpReques 的更多信息：

XMLHttpRequest 对象所有现代浏览器都支持 XMLHttpRequest 对象。 XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以更新网页的部分内容，而无需重新加载整个页面。

创建 XMLHttpRequest 对象所有现代浏览器（Chrome、Firefox、IE7+、Edge、Safari、Opera）都有一个内置的 XMLHttpRequest 对象。创建 XMLHttpRequest 对象的语法：variable = new XMLHttpRequest();

跨域访问 出于安全原因，现代浏览器不允许跨域访问。这意味着网页和它尝试加载的 XML 文件必须位于同一台服务器上。 W3Schools 上的示例都打开了位于 W3Schools 域中的 XML 文件。如果您想在您自己的网页之一上使用上面的示例，您加载的 XML 文件必须位于您自己的服务器上。

有关更多详细信息，您可以继续阅读here...

---

对于 PHP，请查找 https://developer.hyvor.com/php/image-upload-ajax-php-mysql

HTML

<html>
<head>
    <title>Image Upload with AJAX, PHP and MYSQL</title>
</head>
<body>
<form onsubmit="submitForm(event);">
    <input type="file" name="image" id="image-selecter" accept="image/*">
    <input type="submit" name="submit" value="Upload Image">
</form>
<div id="uploading-text" style="display:none;">Uploading...</div>
<img id="preview">
</body>
</html>

JAVASCRIPT

var previewImage = document.getElementById("preview"),  
    uploadingText = document.getElementById("uploading-text");

function submitForm(event) {
    // prevent default form submission
    event.preventDefault();
    uploadImage();
}

function uploadImage() {
    var imageSelecter = document.getElementById("image-selecter"),
        file = imageSelecter.files[0];
    if (!file) 
        return alert("Please select a file");
    // clear the previous image
    previewImage.removeAttribute("src");
    // show uploading text
    uploadingText.style.display = "block";
    // create form data and append the file
    var formData = new FormData();
    formData.append("image", file);
    // do the ajax part
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var json = JSON.parse(this.responseText);
            if (!json || json.status !== true) 
                return uploadError(json.error);

            showImage(json.url);
        }
    }
    ajax.open("POST", "upload.php", true);
    ajax.send(formData); // send the form data
}

PHP

<?php
$host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$mysqli = new mysqli($host, $user, $password, $database);


 try {
    if (empty($_FILES['image'])) {
        throw new Exception('Image file is missing');
    }
    $image = $_FILES['image'];
    // check INI error
    if ($image['error'] !== 0) {
        if ($image['error'] === 1) 
            throw new Exception('Max upload size exceeded');

        throw new Exception('Image uploading error: INI Error');
    }
    // check if the file exists
    if (!file_exists($image['tmp_name']))
        throw new Exception('Image file is missing in the server');
    $maxFileSize = 2 * 10e6; // in bytes
    if ($image['size'] > $maxFileSize)
        throw new Exception('Max size limit exceeded'); 
    // check if uploaded file is an image
    $imageData = getimagesize($image['tmp_name']);
    if (!$imageData) 
        throw new Exception('Invalid image');
    $mimeType = $imageData['mime'];
    // validate mime type
    $allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!in_array($mimeType, $allowedMimeTypes)) 
        throw new Exception('Only JPEG, PNG and GIFs are allowed');

    // nice! it's a valid image
    // get file extension (ex: jpg, png) not (.jpg)
    $fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
    // create random name for your image
    $fileName = round(microtime(true)) . mt_rand() . '.' . $fileExtention; // anyfilename.jpg
    // Create the path starting from DOCUMENT ROOT of your website
    $path = '/examples/image-upload/images/' . $fileName;
    // file path in the computer - where to save it 
    $destination = $_SERVER['DOCUMENT_ROOT'] . $path;

    if (!move_uploaded_file($image['tmp_name'], $destination))
        throw new Exception('Error in moving the uploaded file');

    // create the url
    $protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
    $domain = $protocol . $_SERVER['SERVER_NAME'];
    $url = $domain . $path;
    $stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
    if (
        $stmt &&
        $stmt -> bind_param('s', $url) &&
        $stmt -> execute()
    ) {
        exit(
            json_encode(
                array(
                    'status' => true,
                    'url' => $url
                )
            )
        );
    } else 
        throw new Exception('Error in saving into the database');

} catch (Exception $e) {
    exit(json_encode(
        array (
            'status' => false,
            'error' => $e -> getMessage()
        )
    ));
}

---

您可以使用 JavaScript 或 jQuery 进行异步多文件上传，而无需使用任何插件。您还可以在进度控件中显示文件上传的实时进度。我遇到了 2 个不错的链接 -

基于 ASP.NET Web 表单的多文件上传功能，带有进度条 基于 ASP.NET MVC 的多文件上传，用 jQuery 制作

服务器端语言是 C#，但您可以进行一些修改以使其与 PHP 等其他语言一起使用。

文件上传 ASP.NET Core MVC：

在 html 中查看创建文件上传控件：

<form method="post" asp-action="Add" enctype="multipart/form-data">
    <input type="file" multiple name="mediaUpload" />
    <button type="submit">Submit</button>
</form>

现在在您的控制器中创建操作方法：

[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
    //looping through all the files
    foreach (IFormFile file in mediaUpload)
    {
        //saving the files
        string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

hostingEnvironment 变量属于 IHostingEnvironment 类型，可以使用依赖注入将其注入控制器，例如：

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}

---

这是一个老问题，但仍然没有答案正确答案，所以：

你试过jQuery-File-Upload吗？

这是上面链接中的一个示例，它可能会解决您的问题：

$('#fileupload').fileupload({
    add: function (e, data) {
        var that = this;
        $.getJSON('/example/url', function (result) {
            data.formData = result; // e.g. {id: 123}
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });
    } 
});

---