最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery获取intput file图片的宽高
时间:2016-07-25 编辑:简简单单 来源:一聚教程网
如何判断input file表单里上传的图片的宽高呢?这个时候图片还没真正上传,也不是在页面上展示,不能使用$(“id”).width()这种方式。
在Stack Overflow找到一个方法:
var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
alert(this.width + " " + this.height);
};
img.src = _URL.createObjectURL(file);
}
});
发现可以用,仅在火狐中测试了,其他浏览器兼容性未知,因为后台使用,所以暂且不管兼容性,拿来封装了一下。
这里封装了一个获取input file图片的宽高的函数,如下:
//获取input图片宽高
function getImageWidthAndHeight(id, callback) {
var _URL = window.URL || window.webkitURL;
$("#" + id).change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
callback && callback({"width": this.width, "height": this.height});
};
img.src = _URL.createObjectURL(file);
}
});
}
这里使用了一个回调方法。
在jQuery中使用:
(function () {
getImageWidthAndHeight('image_file', function (obj) {
if (obj.width != 843 || obj.height != 1038) {
$.messager.alert('操作提示', result.data.msg, '弹窗图片宽高必须是843*1038px');
}
});
})(jQuery)
这样就OK了。
例子,
部分html代码
jq代码
$(function(){
var imgurl=[];
function createfile(){
$('#updiv').append("");
}
function showimg(url){
var img='';
$('#imglist').append(img);
}
function addfile(){
showimg($(this).val());
$(this).hide();
createfile();
$('.upfile').bind('change',addfile);
}
$('.upfile').bind('change',addfile);
})
js简陋的获取图片方式
// 图片地址 后面加时间戳是为了避免缓存
var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 打印
alert('width:'+img.width+',height:'+img.height);
返回为0,0
例子,onload后在打印
// 图片地址 后面加时间戳是为了避免缓存
var img_url = '/upload/2013/13643608813441.jpg?'+Date.parse(new Date());
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 加载完成执行
img.onload = function(){
// 打印
alert('width:'+img.width+',height:'+img.height);
};
返回有参数
通过complete与onload一起混合使用
为了测试缓存效果,注意以下测试图片的url都不加时间戳
// 图片地址
var img_url = 'static/upload/2013/13643608813441.jpg';
// 创建对象
var img = new Image();
// 改变图片的src
img.src = img_url;
// 判断是否有缓存
if(img.complete){
// 打印
alert('from:complete : width:'+img.width+',height:'+img.height);
}else{
// 加载完成执行
img.onload = function(){
// 打印
alert('from:onload : width:'+img.width+',height:'+img.height);
};
}
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31