单独选择多个文件并使用 PHP 上传答案

【问题标题】：Select multiple files individually and upload with PHP单独选择多个文件并使用 PHP 上传
【发布时间】：2014-11-23 22:34:18
【问题描述】：

我正在使用 JS 和 PHP 创建一个多图像上传器，用户可以从一个输入中选择多个文件。上传脚本非常好用，用户可以一次选择多个文件并毫无问题地全部上传。

我想要做的是允许用户选择一个文件，然后单击相同的输入按钮并选择要上传的第二个文件。现在，用户可以这样做，并且图像都显示在我设置的“预览”中，但是当单击提交时——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>

这是我的 PHP 处理上传：

if ( $_FILES ) {
    $count;
    $files = $_FILES['upl'];
    foreach ($files['name'] as $key => $value) {
        if ($files['name'][$key]) {
            $file = array(
                'name'     => $files['name'][$key],
                'type'     => $files['type'][$key],
                'tmp_name' => $files['tmp_name'][$key],
                'error'    => $files['error'][$key],
                'size'     => $files['size'][$key]
            );

            $_FILES = array("upl" => $file);

            foreach ($_FILES as $file => $array) {
                $count++;
                $newupload = insert_attachment($file,$rid,$count);

                if(is_wp_error($newupload)) {
                    $errors['image'] = "Image upload failed!";
                }
            }
        }
    }
}

以及处理图像预览的 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>

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

【问题讨论】：

您需要复制或链接图像/文件并在后台上传，因此您不需要依赖来包含所有文件数据。
所以唯一的方法是在点击提交之前通过 AJAX 上传图片？如果我想让他们在上传之前删除一些选定的图像怎么办？
您不必立即上传它们，而且在上传之前想出一些 UI 来编辑列表应该不会太难。您可以添加列表 onchange() 以确保文件在重新选择时不会丢失，然后如果您交换输入，则使用 FormData 甚至是实际的不可见表单将它们全部发送出去。
我不担心编辑列表的 UI，我只需要能够单独上传多张图片，而不是一次选择所有图片。所以你是说将图像数据 ajax 到数组 onchange 然后在提交表单时处理上传？
我只会让提交按钮上传任何选择的内容，而浏览按钮会将选择的任何内容添加到要上传的内容列表中。例如，很像 gmail；您可以添加文件附件，添加更多文件，然后在发送电子邮件之前删除其中的一些。唯一的技巧是您需要立即使用 URL.createObjectURL() 或 FileReader() 获取文件数据，因为一旦选择了另一个文件，您就无法读取该文件。

标签： javascript php jquery html file-upload

【解决方案1】：

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

【讨论】：

其实这也行不通。现在它只需要选择的第一张图片，而不是最后一张。
我不明白选择第一个图像是什么？你的意思是它只上传选择的第一个文件还是？
在我的问题中，我说 PHP 只获取最后选择的图像并上传它。当我做出您建议的更改时 - 隐藏旧输入并附加新输入，它只选择第一个图像而不是最后一个。
啊，没关系，我通过将隐藏/附加代码放在上面编写的 handleFileSelect(evt) 函数中来实现这一点。

【解决方案2】：

我认为您可以使用 File Reader 对象来动态读取文件数据参考：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

您还可以使用 FormData 对象动态创建文件对象或任何其他表单数据参考：https://developer.mozilla.org/en-US/docs/Web/API/FormData

解决方案：在选择文件时，您可以使用文件阅读器对象读取文件并使用表单数据对象附加到表单数据。参考：https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

【讨论】：