How to add multiple file input fields through 1 input file [duplicate]

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
– guest271314, Commented Dec 8, 2016 at 21:13

norcal johnny · Accepted Answer · 2016-12-08 21:37:46Z

0

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.

answered Dec 8, 2016 at 21:37

norcal johnny

2,1313 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add multiple file input fields through 1 input file [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related