jQuery获取file控件中图片的宽高与大小
投稿:daisy
本文通过实例代码告诉大家如何利用jQuery获取file控件中图片的宽高与大小,在我们上传之前就可以检查上传图片的大小,高度,宽度是否适合我们的要求了,下面是关于判断图片的宽高大小的代码。
问题
如何判断input file表单里上传的图片的宽高和大小呢?
解决方案
这个时候图片还没真正上传,也不是在页面上展示,不能使用$(“#id”).width(),$(“#id”).height()
这种方式。
在Stack Overflow找到一个方法获取input file图片文件的宽高:
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, "filesize": file.size}); }; img.src = _URL.createObjectURL(file); } }); }
这里使用了一个回调方法,回调方法的参数是这个json对象,包含宽度、高度和大小,在jQuery中这样调用:
(function () { //省略其他代码 getImageWidthAndHeight('image_file', function (obj) { if (obj.width != 843 || obj.height != 1038) { $.messager.alert('操作提示', '弹窗图片宽高必须是843*1038px'); } }); })(jQuery)
好了,这样就OK了。以上就是jQuery获取intput file图片的宽高和大小的全部内容了,相信本文的内容会对大家平时使用jQuery和图片上传的时候很有帮助的。
您可能感兴趣的文章:
- jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
- jquery-file-upload 文件上传带进度条效果
- jQuery插件ajaxFileUpload使用详解
- jQuery File Upload文件上传插件使用详解
- jQuery插件ajaxFileUpload异步上传文件
- Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
- 从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
- jQuery插件ajaxfileupload.js实现上传文件
- JQuery fileupload插件实现文件上传功能
- jquery获取file表单选择文件的路径、名字、大小、类型