HTML5-如果逐个选择文件,则用于上载的JQuery多文件选择不起作用

HTML5-如果逐个选择文件,则用于上载的JQuery多文件选择不起作用,jquery,html,Jquery,Html,在这个链接的帮助下,我正在使用HTML5和PHP进行多文件上传 当我一次选择多个产品时,所有文件都会显示在selectedFiles div中&当我单击upload时,所有文件都会上载 但是,当我选择一个产品并再次单击“选择文件”以添加第二个文件时,所有文件都将显示在selectedFiles div中&当我单击“仅上载其上一个选定文件”时 我希望所有的产品都被上传 这是代码 <html> <head> <script src="//code.jqu

在这个链接的帮助下,我正在使用HTML5和PHP进行多文件上传

当我一次选择多个产品时,所有文件都会显示在selectedFiles div中&当我单击upload时,所有文件都会上载

但是,当我选择一个产品并再次单击“选择文件”以添加第二个文件时,所有文件都将显示在selectedFiles div中&当我单击“仅上载其上一个选定文件”时

我希望所有的产品都被上传

这是代码

<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 />
每个输入都包含一个或多个文件,将上载这些文件