如何通过1个输入文件添加多个文件输入字段[重复]

Question

我的系统不允许多文件输入，而且我没有使用 AJAX。

我的情况是我想从 1 个输入文件“多个”添加图像，并将它们映射到多个隐藏文件输入。这可能吗？

在此链接中 https://github.com/blueimp/jQuery-File-Upload/wiki/Options html

<form method="post" action="path">
    <input type="file" name="temp" id="temp" multiple>
    <input type="file" name="images" id="images" style="display: none">
    <input type="file" name="images2" id="images2" style="display: none">
    <input type="file" name="images3" id="images3" style="display: none">
    <input type="file" name="images4" id="images4" style="display: none">
    <input type="file" name="images5" id="images5" style="display: none">
</form>

Javascript

jQuery(document).ready(function($){
    $('#form').fileupload({
        paramName: ["images", "images2", "images3", "images4", "images5"],
        fileInput: $('#form input#temp'),
        replaceFileInput: false,
        change: function (e, data) {
                        $.each(data.files, function (index, file) {
                            console.log('Selected file: ' + file.name);
                        });
                    }
    })
})

我尝试将参数“fileInput”设置为临时文件输入，并将“paramName”设置为其他文件输入的数组，但它不起作用，并且似乎不用于此目的。

可以吗？

Answer 1

你可以用这样的东西来替换每个 div 图像

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#divId').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

并有一个清晰的图像来代替每个要替换的 div img..显然为您的图像数量调整一些代码。如果有一个工作小提琴，我会完全编码它。