Javascript 分别选择多个文件并使用PHP上载

我正在使用JS&PHP创建一个多图像上传程序，用户可以从一个输入中选择多个文件。上传脚本的作品伟大，用户可以选择多个文件在一次和上传他们都没有问题

我试图做的是允许用户选择一个文件，然后单击相同的输入按钮并选择第二个文件进行上传。现在，用户可以这样做，并且图像都显示在我设置的“预览”中，但是单击submit时，PHP只处理并上载最近选择的图像，而不是第一个图像

同样，当您一次选择多个文件时，上载工作正常，但当您单独选择多个文件时，上载不起作用。这有什么办法吗

这是我的文件输入和预览HTML：

<fieldset id="vehicle-image">
    <div class="form-group <?php if(isset($errors['image'])) echo "has-error"; ?>">
        <label class="section-title">Vehicle Image</label>
        <div id="ride-image-container" class="form-group">
             <div class="fileupload fileupload-new" data-provides="fileupload">
                 <div class="col-sm-12">
                    <span class="btn btn-primary btn-file">
                        <span class="fileupload-new">Select file</span>
                        <input name="upl[]" id="ride_image" type="file" multiple="multiple"/>
                    </span>
                    <div id="file_preview"></div>
                    <?php
                        if(isset($errors['image'])) { 
                            echo '<small class="help-block">' . $errors['image'] . '</small>';  
                        }
                    ?>
                </div>
            </div>
        </div>
    </div>
</fieldset>

处理图像预览的Javascript可能不是必需的，但我想我无论如何都会包含它-这部分非常有用：

<script>

    // Handle File Select
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            // Access the HTML5 FileReader API
            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function(theFile) {
                return function(e) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                    document.getElementById('file_preview').insertBefore(span, null);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

    document.getElementById('ride_image').addEventListener('change', handleFileSelect, false);

</script>

---

甚至可以实现这种功能吗？如果是这样的话，我的代码是否有什么问题阻止了我这么做？

我不久前也遇到过同样的问题，但我可以找到解决方法，下面就是我要做的。每次用户单击并选择文件时，我都会将css类添加到文件输入并将其隐藏，然后将具有相同属性的新文件输入附加到表单中。这很好，不需要在后端进行更改，只需要在前端进行轻微更改。希望这对您有所帮助。

我认为您可以使用文件读取器对象动态读取文件数据 参考：

还可以使用FormData对象动态创建文件ObjSet或任何其他表单数据 参考：

解决方案：选择文件时，可以使用文件读取器对象读取文件，并使用表单数据对象将其附加到表单数据。

---

请参阅：

您需要复制或链接图像/文件并在后台上载，因此您不需要依赖于来包含所有文件数据。因此，唯一的方法是在单击“提交”之前通过AJAX上载图像？如果我想让他们在上传之前删除一些选定的图像，那该怎么办？你不必马上上传它们，而且在上传之前想一些UI来编辑列表也不会太难。您可以在更改后添加列表，以确保文件在重新选择时不会丢失，然后使用FormData发送所有文件，如果您切换输入，甚至使用实际不可见的表单发送。我不担心编辑列表的UI，我只需要能够单独上载多个图像，而不是一次选择所有图像。那么你是说ajax将图像数据一经更改就发送到一个数组，然后在提交表单时处理上传？我只想让“提交”按钮上传所选内容，而“浏览”按钮将所选内容添加到要上传的内容列表中。例如，很像gmail；您可以添加文件附件，添加更多文件，然后在发送电子邮件之前删除其中的一些文件。唯一的诀窍是，您需要立即使用URL.createObjectURL或FileReader获取文件数据，因为一旦选择了另一个文件，您就无法读取该文件。实际上，这也不起作用。现在它只拍摄第一张选定的图像，而不是最后一张。我不明白拍摄第一张选定的图像是什么？你的意思是上传oly选择的第一个文件，还是？在我的问题中，我说PHP只是获取最后选择的图像并上传它。当我做了你建议的更改-隐藏旧的输入并附加一个新的输入时，它只接受选择的第一个图像而不是最后一个。啊，没关系，我通过将隐藏/附加代码放在上面编写的handleFileSelectevt函数中实现了这一点。

<script>

    // Handle File Select
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

            // Only process image files.
            if (!f.type.match('image.*')) {
                continue;
            }

            // Access the HTML5 FileReader API
            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function(theFile) {
                return function(e) {
                    // Render thumbnail.
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                    document.getElementById('file_preview').insertBefore(span, null);
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

    document.getElementById('ride_image').addEventListener('change', handleFileSelect, false);

</script>