Question

我试图将图片上传到网站。当我在输入中选择一些图像时，它会上传所有图像，但是当我从同一输入中选择另一个图像时，它会删除第一张图像。

HTML

<div class="container">
    <h1>Image Uploader</h1>

    <input type="file" name="images[]" id="images" multiple>
    <hr>
    <div id="images-to-upload">

    </div>
    <!-- end #images-to-upload -->

    <hr>
    <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会向他们展示预览。

jQuery的：

    //indirect ajax
    //file collection array
    var fileCollection = new Array();

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

        var files = e.target.files;
        $.each(files, function(i, file) {
            var array_field = fileCollection.push(file) - 1;

            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {

                var template = '<form id="form-' + array_field + '" class="upload_form col-md-6 col-xs-12" action="/upload">' +
                    '<img class="col-md-4 col-xs-4" src="' + e.target.result + '"> ' +
                    '<input style="width:90px; height:28px" class="col-md-2 col-xs-4 table"  type="number" name="table" id="table" >' +
                    '<input type="hidden" class="image_loc" value="' + array_field + '">' +
                    '<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 id="progress-bar-' + array_field + '" class="progress-bar " style="font-size: 15px; width:0%"></div></div> ' +
                    '</form>';

                $('#images-to-upload').append(template);
            };
        });
    });
</script>

Answer 1

尝试使用它可能会有效。

    var fileCollection = new Array();

    $('#images').on('change', function(e) {
                    var files = e.target.files;
        $.each(files, function(i, file) {
            var array_field = fileCollection.push(file) - 1;

            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                var template = $('#images-to-upload').html();
                template += '<form id="form-' + array_field + '" class="upload_form col-md-6 col-xs-12" action="/upload">' +
                    '<img class="col-md-4 col-xs-4" src="' + e.target.result + '"> ' +
                    '<input style="width:90px; height:28px" class="col-md-2 col-xs-4 table"  type="number" name="table" id="table" >' +
                    '<input type="hidden" class="image_loc" value="' + array_field + '">' +
                    '<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 id="progress-bar-' + array_field + '" class="progress-bar " style="font-size: 15px; width:0%"></div></div> ' +
                    '</form>';

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

            };

        });

    });

在HTML输入类型=文件中选择另一个图像后删除文件

1 个答案: