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

【问题标题】：How to give an unique ID for each file selected when uploading multiple files上传多个文件时如何为选择的每个文件提供唯一 ID
【发布时间】：2023-11-29 05:57:01
【问题描述】：

我正在制作一个文件上传器，我需要获取每个选择的图像的 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/

【问题讨论】：

您将问题标记为 PHP，因此您可以使用 uniqid()
it's not working 不是正确的问题陈述
@ForceBru 我试过了，但总是为所有图像提供相同的数字
@KelsonBatista，然后使用简单的随机数生成器和散列函数。或者计算所有已上传的文件并对数字进行哈希处理，这样哈希值将始终是唯一的。
@charlietfl 实际上它可以工作，但不是正确的方法，它总是给我选择的所有多个图像的相同编号，所以如果它们是相同的编号，则不可能为每个图像提供唯一的 id跨度>

标签： jquery forms dom input filereader

【解决方案1】：

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

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

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

【讨论】：

无论我在哪里尝试给他们随机数，所有文件都会得到相同的 ID，我不知道为什么，但看起来它们是同时打印的
@KelsonBatista，然后尝试使用第二种解决方案。顺便说一句，你的 PHP 代码在哪里？也许有一些错误？
php 是我一直在寻找的解决方案
我首先在预览文件中工作，非常简单，只是想显示文件并能够在上传之前取消其中的一些文件。我不能给出唯一的编号，因为所有文件都同时进入该函数
@KelsonBatista，你需要 PHP 来上传文件。你有任何 PHP 代码吗？

【解决方案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);
        }
    }

【讨论】：

【解决方案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);
        }
    }

}

【讨论】：