javascript - JQuery 文件上传大小和类型限制
问题描述
我有一个需要限制文件格式和大小的 JQuery 多文件上传解决方案。
这是JSFIDDLE,JS代码如下:
$(document).ready(function() {
if (window.File && window.FileList &&
window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
"</span>").insertAfter("#files");
$(".remove").click(function() {
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
$(document).on('click', '[name=Reset]', function(){
$('.pip').remove();
})
期望的结果是允许我设置可以轻松更改的文件类型和大小。
谢谢你的帮助!
解决方案
您可以在向 var f 声明值后立即设置条件
if(f.size > 200000 || f.type !="image/png"){
alert("File too big or not a valid Type");
$("#files").val("");
}
你也可以 console.log(f); 更多房源
这是我的功能版本:
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i];
if(f.size > 200000 || f.type !="image/png"){
alert("File too big or not a valid Type");
$("#files").val("");
}
else{
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\"><i class='fa fa-times'></i></span>" +
"</span>").insertAfter("#files");
$(".remove").click(function() {
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
$(document).on('click', '[name=Reset]', function(){
$('.pip').remove();
})
推荐阅读
- html - 在表格中,如果包含两个标签,那么可以将一个标签设为粗体吗?
- html - 响应式图像顶部的 Css 图像绝对位置
- php - Homebrew 升级后 MySQL 服务器消失了
- r - 直方图显示不正确
- bash - 使用容器内的 shell 文件设置系统 ENV
- php - 如何将 5 位数字与 preg match 完全匹配?
- node.js - 如何使用 typescript/NodeJS 构建 UI
- javascript - React - 用输入值填充状态数组
- php - 如何在收藏laravel中添加数字?
- android - 如何将项目模块库暴露给 App 模块(Android Studio)