Question

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

因此，我希望任何人都可以帮助我修改此代码，以便浏览的每个图像都有自己唯一的ID。

并且

这是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只是一个微小的变化，请看下面的小提琴

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);
        }
    }

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

1 个答案: