上传图片并限制图片格式和大小

我这个用的是双击上传图片

特俗要求。。。。

<img id="urlImg" src="" width="205px" height="150px"  ondblclick="fileSelect();">

 <input type="file" name="fileToUpload" id="fileToUpload" onchange="changepic(this)"  style="display:none;">

        function fileSelect() {
            document.getElementById("fileToUpload").click(); 
        }

          function changepic() {
              var fileTypes = [".jpg", ".png",".jpeg",".gif",".bmp"];
                var filePath = fileToUpload.value;
                var fileSize = 0;
                var fileMaxSize = 1024*3;//1M
            

                if(filePath){
                    var isNext = false;
                    var fileEnd = filePath.substring(filePath.indexOf("."));
                    
                    fileSize =fileToUpload.files[0].size;
                    var size = fileSize / 1024;
                    

                    var reads= new FileReader();
                    f=document.getElementById('fileToUpload').files[0];
                    reads.readAsDataURL(f);
                    
                    for (var i = 0; i < fileTypes.length; i++) {
                        if (fileTypes[i] == fileEnd) {
                            isNext = true;
                            break;
                        }
                    }
                    if (!isNext){
                       $.messager.alert('错误','请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片','error');
                        fileToUpload.value = "";
                        return false;
                    }
                    else if (size > fileMaxSize) {
                        $.messager.alert('错误','文件大小不能超过3M','error');
                        fileToUpload.value = "";
                        return false;
                    }else{

                        reads.οnlοad=function (e) {
                            document.getElementById('urlImg').src=this.result;
                        }
                    }
                }
            
              
            }

 

转载于:https://www.cnblogs.com/liaoxun/p/10321560.html