javascript - 查看具有唯一 ID 的多个浏览图像

Question

在stackoverflow中搜索后，终于找到了一个可以浏览多张图片并一张一张预览的代码。但是，当我检查浏览器中的元素时，每个图像的所有 id 都是相同的。

所以，我希望任何人都可以帮助我如何修改这段代码，以便浏览的每张图片都有自己唯一的 ID。

Here is the fiddle:

和

这是 html 表单:

<input id="imgInput" type="file"  name="file[]" multiple style="display:none;"/>
    <input type="button" onclick="$('#imgInput').click();" value="Choose File" />
     <output id="result" ></output>

<div style="margin-top:150px;" id="uploadedcontent"></div>

这是JS代码:

         var ftype = new Array();

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

    });
    function readURL(input) {
        var files = input.files;
        var output = document.getElementById("result");
        var count = 0;
         var count1 = 0;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var picReader = new FileReader();
            var divid = 'div_' + i;
            var spanid = 'span_' + i;
            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++;

                var div = document.createElement("div");
                div.setAttribute('id', 'div_' + count);
                div.setAttribute('class', 'divclass');
                if (mimetype.match('image')) {
                    div.innerHTML = "<img id='img_" +  count + "' 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 + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count + "'>x</span>";

                }

                output.insertBefore(div, null);

            });

            picReader.readAsDataURL(file);
        }
    }

Answer 1

它只需要在 div 上使用的计数，添加到 img 中只是一个微小的变化，请参见下面的 fiddle

http://jsfiddle.net/ekzfz9ck/4/

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

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

    });
    function readURL(input) {
        var files = input.files;
        var output = document.getElementById("result");
        var count = 0;
         var count1 = 0;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var picReader = new FileReader();
            var divid = 'div_' + i;
            var spanid = 'span_' + i;
            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')) {

                    // below we add the id using the count used for the div;
                    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 + "'/><span class='boxclose' style='cursor:pointer' id='span_" + count + "'>x</span>";

                }

                output.insertBefore(div, null);

            });

            picReader.readAsDataURL(file);
        }
    }