How to add multiple file input fields through 1 input file

Question

My system doesn't allow multiple file input, and I'm not using AJAX.

My situation is that I want to add images from 1 input file "multiple", and map them to a number of hidden file inputs. Is that possible?

In this link 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);
                        });
                    }
    })
})

I've tried to set parameter "fileInput" to the temp file input and I set "paramName" to the array of the other file inputs, but its not working, and seems not to be used for that purpose.

Can it be done?

Are you trying to add `File` objects to `FileList` object? Does jQuery-File-Upload plugin use ajax? Can you include `html`, `javascript` that you have tried at Question? — guest271314, Dec 08 '16 at 21:13
See also [input file to array javascript/jquery](http://stackoverflow.com/questions/29841147/input-file-to-array-javascript-jquery/) — guest271314, Dec 08 '16 at 21:50

score 0 · Answer 1 · answered Dec 08 '16 at 21:37

You could use something like this to replace each div image

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]);
    }
}

and have a clear image in place of each div img to be replaced..obviously tweak the code some for your amount of images. If there were a working fiddle I would have fully coded it.

How to add multiple file input fields through 1 input file

1 Answers1