Question

在单页中两次使用多个图像上传第一次图像上传是正常工作第二次不工作我试过但它没有用预览和删除选项使用jquery.But两个都显示在单独的区域第一图像uplad如下所示第一个和第二个的显示在下面的第二个jsfiddle代码下面的评论

Answer 1

您必须更改您的ID。他们应该是不同的。比如改变你的第二个“输入[type = file]的id 和输出的id ”。

Answer 2

只需写下：

// edit the change event 
$('input:file').change(function(evt){
    handleFileSelect(evt);
});

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="first-uploader">
<input type="file" id="files" name="image_file_arr[]" multiple>
<br><output id="list"></output>
</div>
<div class="second-uploader">
<input type="file" id="files1" name="image_file_arr[]" multiple>
<br><output id="list1"></output>
</div>

var count=0;
    function handleFileSelect(evt,id) {
        var $fileUpload = $("input#files[type='file']");
        count=count+parseInt($fileUpload.get(0).files.length);

        if (parseInt($fileUpload.get(0).files.length) > 6 || count>5) {
            alert("You can only upload a maximum of 5 files");
            count=count-parseInt($fileUpload.get(0).files.length);
            evt.preventDefault();
            evt.stopPropagation();
            return false;
        }
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
            var reader = new FileReader();

            reader.onload = (function (theFile) {
                return function (e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
                    document.getElementById(id).insertBefore(span, null);
                };
            })(f);

            reader.readAsDataURL(f);
        }
    }

    $('#files').change(function(evt){
        handleFileSelect(evt,'list');
    });
  $('#files1').change(function(evt){
        handleFileSelect(evt,'list1');
    });

    $('#list').on('click', '.remove_img_preview',function () {
        $(this).parent('span').remove();

        //this is not working...
        var i = array.indexOf($(this));
        if(i != -1) {
            array.splice(i, 1);
        }
        // tried this too:
        //$(this).parent('span').splice( 1, 1 );

        count--;
    });

试试这个，它有效

多个图像上传在页面中使用了两次，但第一个是另一个工作不起作用

3 个答案: