HTML5-如果逐个选择文件,则用于上载的JQuery多文件选择不起作用
在这个链接的帮助下,我正在使用HTML5和PHP进行多文件上传 当我一次选择多个产品时,所有文件都会显示在selectedFiles div中&当我单击upload时,所有文件都会上载 但是,当我选择一个产品并再次单击“选择文件”以添加第二个文件时,所有文件都将显示在selectedFiles div中&当我单击“仅上载其上一个选定文件”时 我希望所有的产品都被上传 这是代码HTML5-如果逐个选择文件,则用于上载的JQuery多文件选择不起作用,jquery,html,Jquery,Html,在这个链接的帮助下,我正在使用HTML5和PHP进行多文件上传 当我一次选择多个产品时,所有文件都会显示在selectedFiles div中&当我单击upload时,所有文件都会上载 但是,当我选择一个产品并再次单击“选择文件”以添加第二个文件时,所有文件都将显示在selectedFiles div中&当我单击“仅上载其上一个选定文件”时 我希望所有的产品都被上传 这是代码 <html> <head> <script src="//code.jqu
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="upload.css" media="screen" />
<script>
var selDiv = "";
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document.querySelector('#upload_file').addEventListener('change', handleFileSelect, false);
selDiv = document.querySelector("#selectedFiles");
}
function handleFileSelect(e) {
if(!e.target.files) return;
var files = e.target.files;
for(var i=0; i<files.length; i++) {
var f = files[i];
selDiv.innerHTML += "<div class='file_list'>"+f.name + "</div>";
}
$('#uploadimages').show();
}
$(document).ready(function(){
$("#uploadTrigger").click(function(){
$("#upload_file").click();
});
});
</script>
</head>
<body>
<div id="upload_pages">
<form action="html5-php_multi-file-upload.php" enctype="multipart/form-data" method="POST">
<input type="hidden" name="AddFiles" id="AddFiles" value="1">
<input type="file" name="upload_file[]" class="hidden" id="upload_file" multiple />
<hr>
<hr>
<strong id="form-text">Upload Images </strong>
<div class="button" id="uploadTrigger">Select Images</div>
<div id="selectedFiles" style="width:690px;height:400px;overflow:scroll;border:none"></div>
<input type="submit" value="Upload" id="uploadimages" />
</form>
</div>
</body>
</html>
出于安全原因,浏览器阻止javascript更改将上载的文件:只有用户可以通过用户界面选择文件。这是为了防止恶意脚本在用户不知道的情况下上载/etc/passwd 使用jQuery1.010更难做到这一点。。。但这仍然是可能的 我的解决方案: 为此,每次选择一个或多个文件并隐藏元素时,都需要克隆/复制/创建新的upload_file元素。您还需要触发“单击到最新上载文件”元素 因此,当我分别选择3个文件时,在文档中您将有:
<input type="file" name="upload_file[]" class="hidden" id="upload_file" multiple />
<input type="file" name="upload_file[]" class="hidden" id="upload_file" multiple />
<input type="file" name="upload_file[]" class="hidden" id="upload_file" multiple />
每个输入都包含一个或多个文件,将上载这些文件