如何通过1个输入文件添加多个文件输入字段

时间:2016-12-08 21:11:05

标签: javascript jquery-file-upload

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

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

在此链接中 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);
                        });
                    }
    })
})

我试图设置参数&#34; fileInput&#34;到临时文件输入和我设置&#34; paramName&#34;到其他文件输入的数组,但它不工作,似乎不用于此目的。

可以吗?

1 个答案:

答案 0 :(得分:0)

您可以使用类似的内容替换每个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。显然可以根据你的图像量调整一些代码。如果有一个工作小提琴,我会完全编码。

相关问题