如何使用 jquery 或 JavaScript 在一次浏览中上传多个文件

2023-11-27

我正在开发一个网络应用程序,其中我为多个文件创建了一个页面 一次上传一个浏览文件,而不是一次上传一个文件。

用户将能够通过单击浏览来选择多个文件。

如果有人对此有解决方案,欢迎

Thanks!


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

HTML

设置属性multiple对于您的输入文件,请检查此链接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

要使用 juery 上传文件,您可以使用 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
        }
    }); 
});  

服务器端(例如:PHP)

//just print $_FILES
print_r($_FILES);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 jquery 或 JavaScript 在一次浏览中上传多个文件 的相关文章

随机推荐