Javascript 如何在上传前验证图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27309921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate the image size before uploading?
提问by stark
I want to validate the image size and extension before uploading an image .I have code for image extention and I want to restrict the size of the image. Here is the code for image extension:
我想在上传图像之前验证图像大小和扩展名。我有图像扩展代码，我想限制图像的大小。这是图像扩展的代码：
function ValidateFileUpload() {
var fuData = document.getElementById('fileChooser');
var FileUploadPath = fuData.value;
if (FileUploadPath == '') {
alert("Please upload an image");
} else {
var Extension = FileUploadPath.substring(
FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
if (Extension == "gif" || Extension == "png" || Extension == "bmp"
|| Extension == "jpeg" || Extension == "jpg") {
if (fuData.files && fuData.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(fuData.files[0]);
}
}
else {
alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. ");
}
}
}
HTML code
HTML代码
<input type="file" name="image" id="fileChooser" style="height:28px; width:175px;" onchange="return ValidateFileUpload()">
采纳答案by Rakhita
function ValidateFileUpload() {
var fuData = document.getElementById('fileChooser');
var FileUploadPath = fuData.value;
if (FileUploadPath == '') {
alert("Please upload an image");
} else {
var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
if (Extension == "gif" || Extension == "png" || Extension == "bmp"
|| Extension == "jpeg" || Extension == "jpg") {
if (fuData.files && fuData.files[0]) {
var size = fuData.files[0].size;
if(size > MAX_SIZE){
alert("Maximum file size exceeds");
return;
}else{
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(fuData.files[0]);
}
}
}
else {
alert("Photo only allows file types of GIF, PNG, JPG, JPEG and BMP. ");
}
}}
MAX_SIZE is the maximum files size you allowed. You can find a good example in the following blog post which was written by me.
MAX_SIZE 是您允许的最大文件大小。您可以在以下由我撰写的博客文章中找到一个很好的示例。
回答by
You can use this code with HTML 5 its tested Demo : Demo for this
您可以将此代码与经过测试的 HTML 5 Demo 一起使用：Demo for this
<input type="file" id="file" />
var _URL = window.URL || window.webkitURL;
$("#file").change(function(e) {
var image, file;
if ((file = this.files[0])) {
image = new Image();
image.onload = function() {
alert("The image width is " +this.width + " and image height is " + this.height);
};
image.src = _URL.createObjectURL(file);
}
});
回答by Aminul
just follow this example http://jsbin.com/ulamor/213/edit?html,css,output
只需按照这个例子 http://jsbin.com/ulamor/213/edit?html,css,output
and submit your form when user input files with your desired file size range
并在用户输入具有所需文件大小范围的文件时提交表单
