gpt4 book ai didi

javascript - 如何防止上传重复图像)在上传前预览

转载 作者:行者123 更新时间:2023-12-02 21:55:29 24 4
gpt4 key购买 nike

如何停止加载预览中已列出的文件?显然,只有当完全相同的文件选择上传预览时,这才有效,但如果新文件很少,它会毫不犹豫地上传所有文件(如果它们已经存在)。

这是我的代码:

// var url = window.URL || window.webkitURL; // alternate use

function readImage(file) {
var reader = new FileReader();
var image = new Image();

reader.readAsDataURL(file);
reader.onload = function(_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~(file.size / 1024) + 'KB';
$('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
};

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

}
$("#choose").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++) {
readImage(F[i]);
}
}
});
#uploadPreview img {
height: 64px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>

最佳答案

一种可能的解决方案是使用文件数组并防止使用文件名将重复文件添加到该数组中,如下所示:

未经测试的代码

// send this to the server
var files = [];

function readImage(file) {
var reader = new FileReader();
var image = new Image();

reader.readAsDataURL(file);
reader.onload = function(_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~(file.size / 1024) + 'KB';

var isNewFile = files
.filter(function(x) { return x.name === file.name; }).length === 0;

if(isNewFile) {
files.push(file);
$('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
else
alert('Duplicate file: ' + file.name);
};

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

关于javascript - 如何防止上传重复图像)在上传前预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60023949/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com