blueimp fileupload - 在上传前检查图像的宽度和高度 [英] blueimp fileupload - check the image width and height before upload
本文介绍了blueimp fileupload - 在上传前检查图像的宽度和高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用blueimp fileupload控制
http： //jsfiddle.net/eLLWN/24/
我想确保如果用户选择的图片少于700 x 700，我不想上传文件和显示提示框
我怎么能这样做？
我正在使用此代码，
$（。photoEditUpload）。fileupload（{
url：'/AjaxFileHandler.ashx'，
dataType ：'json'，
cache：false，
aync：true，
replaceFileInput：true，
maxChunkSize：524288000，
add：function（e，data）{
if（this.disabled）return alert（'File upload not supported！'）;
var F = this.files;
if（F&& F [0]）for （this，F [i]，data）;
}，
函数readImage（$ this，file，data（var i = 0; i< F.length; i ++）readImage ）{
$（＃avaryPopup）。appendTo（体）的模态（显示）。
elementVisiablity（true）;
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：//文件。 type.split（'/'）[1]，
n = file.name，
s = ~~（file.size / 1024）+'KB';
if（file.size> 524288000）{
displayAvaryMsg（您选择了太大的文件，请选择一个较小的图像文件（Max-500MB），Alert）;
return;
}
var aname = n;
// alert（你的图片w是+ w +，h是+ h +，大小是+ s）;
// if（w
// return;
//}
// else {
data.submit（）;
//}
};
image.onerror = function（）{
displayAvaryMsg（请选择一个有效的图像文件（允许使用jpg和png），Alert）;
};
};
}
上面的代码问题是：
[1]如果我选择图片（45 x 45） - 它会显示我的警报：所需的最小图片尺寸为700 x 700 [b] [b] [b] [b] [b] [b] [2] ]如果我再次选择图像（800 x800）它再次显示我的错误相同 - 所需的最小图像尺寸是700 x 700，
一些它如何显示我较旧的值， / p>
解决方案
今天我面临同样的问题，把你的代码修改了一下。这个似乎对我很有用：
jQuery（'＃fileupload'）。bind（'fileuploadadd'，function（e ，数据）{
//这将在所有添加的文件上运行 - 每个文件添加一个运行！ - 不是100％确定
//console.log（e）;
//console.log(data）;
//console.log(data.files）;
//这将删除元素=>防止添加
//data.files.pop（）;
// alert（'Adding'+ data.files）;
var reader = new FileReader（）;
reader.readAsDataURL（data.files [0]）;
reader.data = data;
reader.file = data.files [0];
reader。 onload = function（_file）{
console.log（this.data）;
var image = new Image（）;
$ b $ image.src = _file。 target.result; // url.createObjectURL（file）;
image.file = this.file;
image.data = this.data;
image.onload = function（）{
consol e.log（this.data）;
var w = this.width，
h = this.height，
n = this.file.name;
//console.log(this.data）;
$ b $ * b $ b t = _file.type，
n = _file.name，
s = ~~（_file.size / 1024）+'KB';
if（_file.size> 524288000）{
alert（您选择了太大的文件，请选择一个较小的图像文件（Max-500MB））;
return;
}
var aname = n; * /
// alert（您的图片w是+ w +，h是+ h +，文件名是+ n）;
if（w <800 || h <600）{
//console.log('Too small'+ n）;
alert（'以下图片太小：'+ n +'！应该至少为800x600！'）;
//reader.data.originalFiles.pop（）;
reader.data.files.pop（）;
//这是行不通的，但我不知道为什么
//this.data.files.pop（）;
// var that = $（this）.data（'fileupload'），
// files = that._getFilesFromResponse（data），
// displayAvaryMsg（'需要的最小图片尺寸是'+ maxSize +'x'+ maxSize +'px'，Alert）;
// return;
} else {
//data.submit（）;
}
};
image.onerror = function（）{
alert（请选择一个有效的图像文件（允许使用jpg和png））;
};
//将在稍后运行，而不是加载！ =>没有使用
};
//以后会比image.load更快运行！ =>没有使用
/ *
console.log（HE end：+ had_error）
if（had_error || true）{
//data.files.error = true;
//data.abort（）;
//返回false;
} * /
}）;
我留下了一些评论来给别人一些线索。我相信，这不是完美的，可以随意更改它。
另一方面，更强大的解决方案是使用fileuploads的validate插件。 。i am using blueimp fileupload control
i want to make sure that if user select image less then 700 x 700, i dont want to upload file and show alert box
How could i do that?
i am using this code,
$(".photoEditUpload").fileupload({
url: '/AjaxFileHandler.ashx',
dataType: 'json',
cache: false,
aync: true,
replaceFileInput: true,
maxChunkSize: 524288000,
add: function (e, data) {
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(this, F[i], data);
},
function readImage($this, file, data) {
$("#avaryPopup").appendTo("body").modal('show');
elementVisiablity(true);
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';
if (file.size > 524288000) {
displayAvaryMsg("You have selected too big file, please select a one smaller image file (Max-500MB)", "Alert");
return;
}
var aname = n;
//alert("your image w is" + w + "and h is" + h + "and size is" + s);
//if (w < maxSize || h < maxSize) {
// displayAvaryMsg('Minimum image dimension required are ' + maxSize + ' x ' + maxSize + ' px', "Alert");
// return;
//}
//else {
data.submit();
//}
};
image.onerror = function () {
displayAvaryMsg("Please select a valid image file (jpg and png are allowed)", "Alert");
};
};
}
from above code problem is :
[1] if i select the image ( 45 x 45 ) - it shows me alert : that Minimum image dimension required are 700 x 700
[2] if i again select image ( 800 x800 ) it show me error again same - Minimum image dimension required are 700 x 700,
some how it shows me older values,
解决方案
I faced the same issue today, took your code and modified it a bit. This one seems to be working for me:
jQuery('#fileupload').bind('fileuploadadd', function (e, data) {
// this will run on all files added - one run per file added! - not 100% sure
//console.log(e);
//console.log(data);
//console.log(data.files);
// this will remove the element => prevent adding
//data.files.pop();
//alert('Adding '+data.files);
var reader = new FileReader();
reader.readAsDataURL(data.files[0]);
reader.data = data;
reader.file = data.files[0];
reader.onload = function (_file) {
console.log(this.data);
var image = new Image();
image.src = _file.target.result; // url.createObjectURL(file);
image.file = this.file;
image.data = this.data;
image.onload = function () {
console.log(this.data);
var w = this.width,
h = this.height,
n = this.file.name;
//console.log(this.data);
/*
t = _file.type,
n = _file.name,
s = ~~(_file.size / 1024) + 'KB';
if (_file.size > 524288000) {
alert("You have selected too big file, please select a one smaller image file (Max-500MB)");
return;
}
var aname = n;*/
//alert("your image w is " + w + " and h is " + h + " and filename is " + n);
if ( w < 800 || h < 600 ) {
//console.log('Too small '+n);
alert('The following pic is too small: '+n+'! Should be at least 800x600!');
//reader.data.originalFiles.pop();
reader.data.files.pop();
// this is not working, but I don't know why
//this.data.files.pop();
//var that = $(this).data('fileupload'),
//files = that._getFilesFromResponse(data),
// displayAvaryMsg('Minimum image dimension required are ' + maxSize + ' x ' + maxSize + ' px', "Alert");
// return;
} else {
//data.submit();
}
};
image.onerror = function () {
alert("Please select a valid image file (jpg and png are allowed)");
};
// will run later, than the load! => no use
};
// will run later, than the image.load! => no use
/*
console.log("HE end: "+had_error)
if ( had_error || true ) {
//data.files.error = true;
//data.abort();
//return false;
}*/
});
I've left some comments in to give others a clue. I'm sure, it's not perfect, feel free to change it.
On the other hand, a more robust solution would be to use the validate plugin for fileuploads...
这篇关于blueimp fileupload - 在上传前检查图像的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
