如何使用jQuery或JavaScript在单个浏览器中上传多个文件 [英] how can I upload multiple files at a single browse using jquery or JavaScript

问题描述

我正在开发一个Web应用程序，在该应用程序中，我创建了一个页面，用于一次浏览多个文件
上传，而不是一次写入一个文件。

用户将能够在点击浏览时选择多个文件。

如果有人为此提供解决方案，欢迎

谢谢！

解决方案

对于替代解决方案，您可以使用HTML5多重上传功能，

<为您的输入文件设置多重的属性 HTML ，

，勾选此链接 https://developer.mozilla.org/en-US/docs/Web/API/Input.multiple

 < form id =form-upload> 
< input type =filename =uploadid =uploadmultiple> 
< / form> 
  

JS
<使用juery上传文件，可以使用form-data： https：//developer.mozilla .org / zh-CN / docs / Web / Guide / Using_FormData_Objects

  $（'＃upload'）。 bind（change，function（）{
 var formData = new FormData（$（＃form-upload）[0]）; 
 //循环添加$ _FILES [upload+ （var i = 0，len = document.getElementById（'upload'）。files.length; i< len; i ++）{
 formData.append（upload+ （i + 1），document.getElementById（'upload'）。files [i]）; 
} 
 
 //将formData发送到服务器端
 $ .ajax（ {
 url：process_upload.php，
类型：'post'，
 data：formData，
 dataType：'json'，
 async：true，
 processData：false，//告诉jQuery不要处理数据
 con tentType：false，//告诉jQuery不要设置contentType 
 error：function（request）{
 console.log（request.responseText）; 
}，
 success：function（json）{
 //将代码放在这里
} 
}）; 
}）; 
  

SERVER-SIDE（例如：PHP）

  //仅打印$ _FILES 
 print_r（$ _ FILES）; 
  

I am developing a web application in which I have create a page for multiple file upload on a single browse not one file at a time.

User will be able to select multiple file on click on browse.

If some one have solution for this please welcome

Thanks!

解决方案

For alternative solution, you can using HTML5 multiple-upload,

HTML

set attribute multiple for your input-file, check this link https://developer.mozilla.org/en-US/docs/Web/API/Input.multiple

<form id="form-upload">
    <input type="file" name="upload" id="upload" multiple>
</form>

JS

to upload file using juery, you can use form-data : https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

 $('#upload').bind("change", function(){
    var formData = new FormData($("#form-upload")[0]);
    //loop for add $_FILES["upload"+i] to formData
    for (var i = 0, len = document.getElementById('upload').files.length; i < len; i++) {
        formData.append("upload"+(i+1), document.getElementById('upload').files[i]);
    }

    //send formData to server-side
    $.ajax({
        url : "process_upload.php",
        type : 'post',
        data : formData,
        dataType : 'json',
        async : true,
        processData: false,  // tell jQuery not to process the data
        contentType: false,   // tell jQuery not to set contentType
        error : function(request){
            console.log(request.responseText);
        },
        success : function(json){
            //place your code here
        }
    }); 
});  

SERVER-SIDE(ex:PHP)

//just print $_FILES
print_r($_FILES);

这篇关于如何使用jQuery或JavaScript在单个浏览器中上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！