[前台]---图片上传和校验

记一次简单的图片上传验证:

页面:
   <input type="file" id="hiddenFile" 
   onchange="uploadImage(event)" 
   accept="image/jpg, image/jpeg, image/gif, image/png">立即上传图片

js:
function uploadImage(e) {
    //图片的提前校验,如果返回false,则代表校验不成功
    if(!preSubmitFileCheck(e)){
        console.info("验证失败，显示提示框");
        return;
    }
    //后面就是调用ajax,将图片传到后台的图片服务器或者文件服务器
    //然后ajax返回图片上传后的路径,
    //最后在页面渲染,供用户点击查看.
}

//ie浏览器必须是图片的后缀,非ie还会校验图片大小,不能超过5兆
function preSubmitFileCheck(e){
    var fileTypes =["jpeg","jpg","png","gif"];

    if(window.navigator.userAgent.indexOf("MSIE")>=1){
        //ie浏览器
        //只看后缀是不是给定的四种,不是就不通过
        //ie暂时还没有获得文件大小的合适方法,欢迎前端大神在评论区补充
        var filePath = document.selection.createRange().text;
        var type = filePath.substring(filePath.lastIndexOf('.') + 1);
        for (var i = 0; i < fileTypes.length; i++) {
            if (fileTypes[i] == type) {
                typeFlag = true;
                break;
            }
        }
        if (!typeFlag) {
            alert("上传格式不符，请重新上传！");
            return false;
        }
    }else{
        //非ie浏览器
        var files = e.target.files, fs = files.length, s = 0;
        for (var i = 0; i < fs; i++) {
            var name = files[i].name;
            console.log("图片大小:size:"+files[i].size)
            if(files[i].size > 5*1024*1024){
                //对图片大小限制,大于5兆也不行
                sizeFlag = true;
            }
            var type = name.substring(name.lastIndexOf('.') + 1);
            typeFlag = false;
            for (var j = 0; j < fileTypes.length; j++) {
                if (fileTypes[j] == type) {
                    typeFlag = true;
                    break;
                }
            }
            if (!typeFlag || sizeFlag) {
                alert("上传格式不符，请重新上传！");
            }
        }
    }
    //到这里代表校验通过了
    return true;
}