js判断图片上传时的文件大小、类型，和宽高尺寸

如何读取图片的size、type

首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图： 

这样的话，我们就可以检测到size。

var fileData = file.files[0];
var size = fileData.size;   //注意，这里读到的是字节数
var isAllow = false;
var maxSize = Max_Size;
maxSize = maxSize * 1024;   //转化为字节
isAllow = size <= maxSize;
var type = fileData.type;  //获取文件类型

如何读取图片的宽高

• 图片真实的宽度和高度，可以通过实例化Image对象、加载src 来获取。
• 兼容性：IE下使用滤镜来处理图片尺寸控制（没弄懂，暂时不做描述）
• 实例化Image对象、加载src 来获取图片宽高具体JS代码如下：

   ——实例化Image对象、加载src—— 

   var img = new Image();
    var Max_Size = 2000; //2M
    var Min_Width = 550; //500px

    var url = window.URL || window.webkitURL;
    img.src = url.createObjectURL(file);//预览加载

   var check = function () {
        // 图片实例化加载时，其宽高为0，只要任何一方大于0，表示图片已经加载完成并返回宽高        
        if (img.width > 0 || img.height > 0) {
            clearInterval(set);
            
            //上传的本地图片支持格式：JPG，JPEG，PNG；单张图片大小不能超过2M，图片的宽高必须相同，且图片像素需大于等于550*550
            if (file.type.indexOf("image") < 0) {                
                ImgUploadTips("请选择图片类型的文件！");
                return;
            }
            if (file.Size > Max_Size * 1024) {
                ImgUploadTips("请上传小于或等于2M的图片！");
                return;
            }
            if (img.width != img.height) {
                ImgUploadTips("请上传宽高相同的图片！");
                return;
            }
            if (img.width < Min_Width) {
                ImgUploadTips("请上传大于等于550*550的图片！");
                return;
            }

     }

    var set = setInterval(check, 40);

——实例化Image对象、加载src—— 

备注：若需获取多张图片宽高进行逻辑判断并提示时，建议使用hiden控件保存异常提示信息，待图片识别结束后获取该控件提示信息进行弹窗提示。

相关补充：input file 清空处理

使用input file上传图片时，如果重复上传相同的图片，会发现对应的改变响应操作没有执行，其原因是input file 选择上传图片后，它的值不会自动清空。

input file 清空实现如下：

html页面代码如下:

<input id="file_input" type="file" onchange="upLoadFile(this)" value="" />

js的代码如下，可以直接将上传文件input按钮的内容直接清空：

var obj=document.getElementById('file_input');
obj.outerHTML=obj.outerHTML;

备注：

1、$("#file_input") .outerHTML不等同document.getElementById('file_input').outerHTML；

2、input file 多选属性为：multiple="multiple"