从另一个 Input 动态设置表单中的输入值

Question

我试图将图片上传到带有标题的网站。我希望用户在上传之前看到图片。

HTML

<div class="container">
                <h1>Image Uploader</h1>
                <input type="file" name="images[]" id="images" multiple>
                <br>
                <div id="images-to-upload" class="row">
                </div>
                <br>
                <div class="col-md-12">
                    <button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
                </div>
            </div>

当用户选择一些图像时，Jquery 在 DIV 中添加带有表单的图像。 jQuery

<script>
    var fileCollection = new Array();

    $('#images').on('change', function(e) {

        var files = e.target.files;

        $.each(files, function(i, file) {

            fileCollection.push(file);

            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                var template = '<form enctype="multipart/form-data" class="upload_form col-md-6 col-xs-12" action="/upload">' +
                    '<img id="img_xx" name="images" class="col-md-4 col-xs-4" src="' + e.target.result + '"> ' +
                    '<input style="width:90px; height:28px" class="col-md-2 col-xs-4"  type="number" name="table" id="table" >' +
                    '<input style="width:90px; height:28px" class="col-md-2 col-xs-4"  type="file" name="images" value="' + e.target.result + '" >' +
                    '<button style="margin:0px 5px 0px 5px; width:95px" class="btn btn-sm btn-primary col-md-3 col-xs-3 submit_form" value="Upload" name="submit_weight">Upload</button>' +
                    '<button type="button" class="btn btn-sm btn-danger remove_form col-md-2 col-xs-6">Cancel</button>' +
                    '<div style="height: 30px; font-size: 20px; margin: 0px 0px 10px 0px; padding: 0px; text-align: center;" class="progress col-md-7 col-xs-6 progress-stripped active"><div class="progress-bar" style="font-size: 15px; width:0%"></div></div> ' +
                    '</form>';


                $('#images-to-upload').append(template);
            };

        });

    });


    $(document).on('submit', 'form', function(e) {

        e.preventDefault();
        var formdata = new FormData(this);
        $form = $(this);

        var request = new XMLHttpRequest();
        request.open('post', 'script/file_upload_admin.php', true);
        request.send(formdata);

        $form.on('click', '.remove_form', function() {
            console.log("Cancel");
            alert("hello");
            $(this).hide();
        });
    });

    $("#upload_button").on('click', function(event) {
        event.preventDefault();
        $(".submit_form").click();
    });
</script>

我的问题是我如何设置来自 FileReader 的输入值，因此图像可以以表单数据的形式发送。我尝试了以下方法，但它不起作用。

$(document).on('submit','form',function(e){

        e.preventDefault();
        //this form index
        var index = $(this).index();

        var formdata = new Formdata($(this)[0]); //direct form not object

        //append the file relation to index
        formdata.append(fileCollection[index]);

        var request = new XMLHttpRequest();
        request.open('post', 'script/file_upload_admin.php', true);

        request.send(formdata);

    });

Answer 1

也许这可以帮助你。

<div class="container">
    <h1>Image Uploader</h1>
    <input id="fileItem" type="file" name="images[]" id="images" multiple>
    <br>
    <div id="images-to-upload" class="row">
    </div>
    <br>
    <div class="col-md-12">
     <button id="upload_button" class="btn btn-sm btn-success col-md-4 col-xs-12">Upload all images</button>
    </div>
 </div>

Javascript

$('#upload_button').click(function(){
    var files = document.getElementById('fileItem').files;
    console.log(files)
    $.each(files, function(index, item) {
       //console.log(index, item);
       console.log(item.name);
       // here you can do anything with name of file.
      // maybe here you can create your form
    });

  });

测试它jsfiddle