提问



我想用jQuery异步上传一个文件。这是我的HTML:


<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>


在这里我的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: ");
            }
        });
    });
});


我只获取文件名,而不是上传文件。我该怎么做才能解决这个问题?


当前解决方案



我正在使用jQuery Form Plugin上传文件。[64]

最佳参考


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


HTML:


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


首先,如果需要,您可以进行一些验证。例如,在文件的onChange事件中:


$(':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(以及一些研究)文件上传不仅可以实现,而且非常简单。尝试使用谷歌浏览器,因为这些示例中的某些HTML5组件并非在每个浏览器中都可用。[67]

其它参考1


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


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


这里有几个:



  • JQuery File Uploader

  • 多文件上传插件

  • 迷你多文件上传

  • jQuery文件上传



您可以在NPM上搜索更多项目(使用jquery-plugin作为关键字)或在Github上搜索。[68] [69] [70] [71]

其它参考2


2017年更新:它仍取决于浏览器您的人口统计用途。



使用新HTML5 file API需要了解的重要事项是,直到IE 10才支持。如果您所针对的特定市场对旧版Windows的倾向高于平均水平,你可能无法访问它。[72]


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


因此,在您执行任何操作之前:检查您的用户使用的浏览器。如果你不这样做,你将会学到一个快速而痛苦的教训,为什么为我工作对于客户的交付是不够的。


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





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


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


如果您需要多个文件上传,最好每次执行一个文件(以克服最大文件上传限制)。将第一个表单发布到iframe,使用上面的内容监控其进度,并在完成后发布iframe的第二种形式,依此类推。


或者使用Java/Flash解决方案。他们对自己的帖子所做的事情更加灵活......

其它参考3


我建议使用Fine Uploader插件来实现此目的。你的JavaScript代码是:[75]


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

其它参考4


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





您无法使用XMLHttpRequest(Ajax)上传文件。您可以使用iframe或Flash模拟效果。优秀的jQuery表单插件通过iframe发布您的文件以获得效果。[76] [77]

其它参考5


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



  • 它不依赖于特定的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');
  }
});

其它参考6


为未来的读者做好准备。


异步文件上传



使用HTML5



如果支持FormData和File API(两种HTML5功能),您可以使用$.ajax()方法上传 with jQuery 文件。 [79] [80]


您也可以在没有FormData的情况下发送文件,但无论是哪种方式都必须存在File API来处理文件,以便可以使用 XMLHttpRequest (Ajax)发送它们。[81]


$.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对象发送文件。[82]


后备



当HTML5不受支持(没有文件API )时,唯一的其他纯JavaScript解决方案(没有 Flash 或任何其他浏览器插件)是隐藏的iframe 技术,允许在不使用 XMLHttpRequest 对象的情况下模拟异步请求。


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


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


在这种情况下,您可能更喜欢使用像Bifröst这样的包装器插件,它使用 iframe技术,但也提供了一个jQuery Ajax传输,允许发送文件只需$.ajax()]]这样的方法://github.com/matiasgagliano/bifrost //api.jquery.com/jQuery.ajaxTransport


$.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到不同后备的整个堆栈以及一些有用的功能来简化流程。根据您的需求和要求,您可能需要考虑裸实现或此插件中的任何一个。//github.com/matiasgagliano/bifrost //malsup.com/jquery/form/ //github.com/blueimp/jQuery-File-Upload

其它参考7


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


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。

其它参考8


我已经遇到了一些非常强大的基于jQuery的文件上传库。请查看以下内容:



  1. Plupload


    • docs:http://www.plupload.com/docs


  2. jQuery文件上传


    • docs:https://github.com/blueimp/jQuery-File-Upload


  3. FineUploader


    • docs:http://docs.fineuploader.com/



其它参考9


您只需使用jQuery上传.ajax()[88] [89] [90] [91] [92] [93]


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) {
                // ...
            }
       });
    }));
});

其它参考10


你可以很容易地在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);

其它参考11


我过去做过的最简单,最健壮的方法是简单地使用您的表单定位隐藏的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


-note-如果您对上传/下载时如何设置UI阻止程序感兴趣,则只需继续阅读


目前,当用于传输文件时,Chrome不会触发iframe的onLoad事件。 Firefox,IE和Edge都会激活onload事件以进行文件传输。


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


基本上在上传/下载开始时这样做:



  • [[客户端]]开始间隔以查找是否存在cookie

  • [[服务器端]]对文件数据执行任何操作

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

  • [[客户端]] Interval查看cookie并将其用作onLoad事件。例如,您可以启动UI阻止程序,然后启动onLoad(或者在创建cookie时),删除UI阻止程序。



使用cookie是很难看的,但它确实有用。


我下载了一个jQuery插件来处理Chrome的这个问题,你可以在这里找到


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


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


要使用下载器(显然包括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回调。

其它参考12


我找到的解决方案是让<form>目标成为隐藏的iFrame。然后,iFrame可以运行JS以向用户显示它是完整的(在页面加载时)。

其它参考13


我已经在Rails环境中编写了这个。如果你使用轻量级的jQuery-form插件,它只有大约五行JavaScript。[95]


挑战在于让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,它就像一个冠军。

其它参考14


简单的Ajax Uploader是另一种选择:


https://github.com/LPology/Simple-Ajax-Uploader[96]



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

  • 支持多个并发上传 - 即使在非HTML5浏览器中也是如此

  • 没有闪存或外部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
    }
});

其它参考15


jQuery Uploadify是我之前用来上传文件的另一个好插件。 JavaScript代码与以下内容一样简单:代码。但是,新版本无法在Internet Explorer中使用。[97]


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

其它参考16


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


使用简单的 Javascripts 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";
}
?>


这是示例应用程序 [98]

其它参考17


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){ }
});


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

其它参考18


要使用Jquery异步上传文件,请使用以下步骤:


第1步在您的项目中打开Nuget管理器并添加包(jquery fileupload(只需要在搜索框中编写它就会出现并安装它。))
网址:https://github.com/blueimp/jQuery-File-Upload [99]


第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步在ready函数调用元素文件上传中,按以下方式启动进程:


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


        }

    }

其它参考19


使用| HTML5的readAsDataURL()或某些base64编码器将文件转换为base64。
小提琴[100] [101] [102]


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);

其它参考20


您可以通过工作演示此处查看已解决的解决方案,该演示文稿允许您预览表单文件并将其提交给服务器。对于您的情况,您需要使用Ajax来方便文件上传到服务器:[103] [104]


<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");

     });
   });
});


查看更多详情[105]

其它参考21


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


实施例



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
  }
});


我希望它会有所帮助

其它参考22


您可以使用


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


演示[107]

其它参考23


在这里查找异步处理文件的上传过程:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications[108]


来自链接的示例


<?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>

其它参考24


这是我的解决方案。


<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)
{
    return Json(":)");
}

其它参考25


使用 HTML5 JavaScript ,上传异步非常简单,我创建了上传逻辑以及你的html,这不是完全正常,因为它需要api,但演示如何如果您的网站根目录中有/upload端点,则此代码适用于您:




const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}

<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>



您可以使用JavaScript的较新的 Fetch API。像这样:[109]


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()会返回Promise,然后处理通过.then(..code to handle response..)异步使用.then(..code to handle response..)[110]

其它参考26


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


你试过jQuery-File-Upload吗?[111]


以下是上面链接的示例 - > 1可能解决您的问题:[112]


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