javascript - 如何防止在上传前上传重复的图像以进行预览
问题描述
如何停止加载以预览已在预览中列出的文件?显然,这仅在完全相同的文件选择上传以进行预览时才有效,但如果新文件很少,如果它们已经存在,它将毫不犹豫地上传所有文件。
这是我的代码:
// 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);
};
};
}
推荐阅读
- c# - C# Windows Service Enviroment.GetFolderPath() 返回空字符串
- assembly - BIOS 中断 13 读取扇区不起作用
- macos - 如何确定 .swp 文件的来源和/或内容?
- arduino - 使用带有 tft 触摸屏的 arduino uno 来控制 LED 灯条
- qt - QML 中 Flickable 中的 ScrollView 内的 ScrollBar
- javascript - 函数中的 Javascript 变量值不会传递给其他函数
- c# - 如何判断一个精灵是否正在接触 Unity2D 中的另一个精灵
- java - 我用Java启动kettle,但找不到大数据插件
- javascript - Javascript:在发送所有http请求后异步打印消息
- javascript - 无法弄清楚为什么 JSON.parse 出乎意料