Question

我不想创建删除按钮;对于每个要在上传之前预览的图像。原因是因为每个图像都有一个唯一的id，所以如果它使用了一个删除按钮，当其中一个图像被删除时，它会搞乱id的排列。

我知道这有点复杂。

如何为每张图片创建重置按钮？因此，当用户点击重置按钮时，它将打开用户计算机的窗口以选择新图像，并且新拾取的图像的ID仍然与之前相同。

这是我的代码：

var ftype = new Array(), count1 = 0;

    $("#imgInput").change(function () {
        readURL(this);

    });
    function readURL(input) {
        var files = input.files;
        var output = document.getElementById("result");



        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var picReader = new FileReader();
            var divid = 'div_' + i;
            var spanid = 'span_' + i;
            var count = 0;
            picReader.addEventListener("load", function (event) {
                var picFile = event.target;
                var picnames = files[count].name;
                var mimetypes = picFile.result.split(',');
                var mimetype1 = mimetypes[0];
                var mimetype = mimetype1.split(':')[1].split(';')[0];
                count++;
                count1++;
                var div = document.createElement("div");
                div.setAttribute('id', 'div_' + count);
                div.setAttribute('class', 'divclass');
                if (mimetype.match('image')) {
                    div.innerHTML = "<img id='img_" +  count1 + "' class='thumbnail' src='" + picFile.result + "'" +
                        "title='" + picnames + "' width='96' height='80' alt='Item Image' style='position:relative;padding:10px 10px 10px 10px;' data-valu='" + mimetype + "'/>";

                }

                output.insertBefore(div, null);

            });

            picReader.readAsDataURL(file);
        }
    }

MY FIDDLE

每个预览图像的重置按钮

0 个答案: