Question

我正在使用JS＆amp; amp;创建一个多图像上传器PHP，用户可以从一个输入中选择多个文件。上传脚本效果很好，用户可以一次选择多个文件并上传所有文件。

我要做的是允许用户选择一个文件，然后单击相同的输入按钮并选择要上传的第二个文件。现在，用户可以执行此操作，并且图像都显示在＆＃39;预览＆＃39;我有设置，但是当点击提交时 - PHP仅处理和上传最近选择的图像，而不是第一个。

同样，当您一次选择多个文件时，上传工作正常，当您单独选择多个文件时，它无法正常工作。有没有解决这个问题？

这是我的文件输入＆amp;预览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>

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

Answer 1

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

Answer 2

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

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

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

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

2 个答案: