Question

我正在制作一个文件上传器，我需要为每个选中的图像获取ID，以便以后删除它们，任何想法？

我试图使用“imgn”，但它不起作用。

var imgn=0;

function readURL(file) {
        var reader = new FileReader();
        var image  = new Image();
        reader.readAsDataURL(file);  

        imgn++;

        reader.onload = function (e) {

            image.src    = e.target.result; 
            image.onload = function() {

            $('#imgpre').append('<p id="imgnum'+imgn+'"><img src="'+ this.src +'" width="80px"><input type="button" value="Remove" onclick="removeimg('+imgn+');"></p>');

            }
            image.onerror= function() {
                alert('Invalid file type: '+ file.type);
            }
        }
}

$("#imgsel").change(function(e){
    if(this.disabled) return alert('File upload not supported!');
    var F = this.files;
    if(F && F[0]) for(var i=0; i<F.length; i++) readURL( F[i] );
});

function removeimg(rnum) {
    jQuery('#imgnum'+rnum).remove();
}

http://jsfiddle.net/8j7gnqve/

Answer 1

您可以使用mt_rand()为每个文件生成一个随机数，然后使用md5()或sha1()对其进行哈希处理。请参阅this以了解如何将数字转换为字符串。

另一种解决方案（可能更慢，更复杂）

计算您收到的每个文件并创建该数字的哈希值。示例：上传的第一个文件将是数字1，将具有相应的哈希值，第二个文件将是数字2，等等。如果您想确定数字是唯一的，但是您有所帮助，这将有所帮助以某种方式存储它们。

Answer 2

FileReader加载处理程序中的增量imgn。 FileReader.readAsDataURL是异步的，并且onload函数将在循环结束后长时间触发，以便安全地将其放入图像加载回调中。

    reader.onload = function (e) {
        image.src    = e.target.result; 
        image.onload = function() {
            imgn++;
            $('#imgpre').append('<p id="imgnum'+imgn+'"><img src="'+ this.src +'" width="80px"><input type="button" value="Remove" onclick="removeimg('+imgn+');"></p>');
        }
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        }
    }

Answer 3

这就是答案：将imgn ++放在每个函数中

    reader.onload = function (e) {

        image.src    = e.target.result; 
        image.onload = function() {

        $( "#imgpre" ).each(function( index ) {
            imgn++;
        });

        $('#imgpre').append('<p id="imgnum'+imgn+'"><img src="'+ this.src +'" width="80px"><input type="button" value="Remove" onclick="removeimg('+imgn+');"></p>');

        }
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        }
    }

}

如何为上载多个文件时选择的每个文件提供唯一的ID

3 个答案: