Question

我正在使用HTML5＆amp ;;进行多文件上传PHP借助此链接https://github.com/hemantrai88/html5-php_multi-file-upload

的帮助

当我一次性多选产品时，所有文件都会显示在 selectedFiles div＆amp;当我点击上传它上传所有文件。

但是，当我选择一个产品＆amp;再次单击选择文件以添加第二个文件，所有文件将显示在 selectedFiles div＆amp;当我点击上传时，只上传最后一次选择。

我希望上传所有产品......

这是代码......

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

Answer 1

出于安全原因，浏览器会阻止javascript更改将要上传的文件：只有用户可以通过用户界面选择文件。这是为了防止邪恶的脚本上传/ etc / passwd，例如，用户不知道。

使用jQuery 1.010它很难做到......但它仍然可能

我的解决方案：

为此，每次选择一个或多个文件（并隐藏元素）时，都需要克隆/复制/创建新的#upload_file元素。您还需要触发单击到最新的#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 />

此输入中的每一个都包含一个（或多个）文件，这些文件将被上传

HTML5 - 上传的JQuery多文件选择如果逐个选择文件，则不起作用

1 个答案: