有关jQuery的文件上传有各种现成的插件。

做这种上传黑客并不是一种愉快的体验，因此人们喜欢使用现成的解决方案。

这里有几个：

• JQuery文件上传器
• 多文件上传插件
• 迷你多文件上传
• jQuery文件上传

您可以在NPM上搜索更多项目（使用“jquery-plugin”作为关键字）或在Github上搜索。

2017年更新：它仍然取决于浏览器 你的 人口统计学用途。

使用“新”HTML5了解一件重要的事情 file API就是这样 IE 10之前不支持。如果您所针对的特定市场对旧版Windows的倾向高于平均水平，则可能无法访问它。

进入2017年，大约5％的浏览器是IE 6,7,8或9中的一个。如果你进入一家大公司（例如，这是一个B2B工具，或者你正在提供培训的东西），那么这个数字可能会爆炸。就在几个月前 - 在2016年 - 我在超过60％的机器上使用IE8处理了一家公司。

所以在你做任何事之前： 检查什么浏览器 你的 用户使用。如果你不这样做，你将学到一个快速而痛苦的教训，为什么“为我工作”对于客户的交付是不够的。

我的答案是从2008年开始的。

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

这是一个“真正的”帖子，所以它不是完全互动的。如果您需要状态，则需要服务器端进行处理。这根据您的服务器而有很大差异。 ASP.NET 有更好的机制。 PHP普通失败，但你可以使用 Perl的 或Apache修改以解决它。

如果您需要多个文件上传，最好一次执行一个文件（以克服最大文件上载限制）。将第一个表单发布到iframe，使用上面的内容监控其进度，完成后，将第二个表单发布到iframe，依此类推。

或者使用Java / Flash解决方案。他们对帖子的处理方式更加灵活......

我推荐使用 精细上传 用于此目的的插件。你的 JavaScript 代码是：

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

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

您无法使用上传文件 XMLHttpRequest的 （阿贾克斯）。您可以使用iframe或Flash模拟效果。优秀 jQuery表单插件 通过iframe发布文件以获得效果。

这个 AJAX文件上传jQuery插件 上传文件somehwere，并传递 响应回调，没有别的。

• 它不依赖于特定的HTML，只需给它一个 <input type="file">
• 它不要求您的服务器以任何特定方式响应
• 您使用的文件数量或页面上的位置无关紧要

- 使用尽可能少 -

$('#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');
  }
});

为未来的读者做好准备。

异步文件上传

使用HTML5

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

您也可以发送文件 没有FormData 但无论哪种方式，File API都必须以处理文件的方式处理文件 XMLHttpRequest的 （阿贾克斯）。

$.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）例子见“使用FormData对象发送文件”。

倒退

不支持HTML5时（不 文件API）唯一的其他纯JavaScript解决方案（没有 闪 或者任何其他浏览器插件） 隐藏的iframe 技术，允许模拟异步请求而不使用 XMLHttpRequest的 目的。

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

如果操作正确，它应该在任何浏览器上虚拟工作，但它有一些警告如何从iframe获取响应。

在这种情况下，您可能更喜欢使用包装器插件 Bifröst 它使用的 iframe技术 还提供了一个 jQuery Ajax传输 允许 发送文件 只有 $.ajax() 像这样的方法：

$.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表单插件要么 jQuery文件上传 包括从HTML5到不同后备的整个堆栈以及一些有用的功能，以简化流程。根据您的需求和要求，您可能需要考虑裸实现或此插件中的任何一个。

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

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。