JS提前预览图片功能

时间:2019-12-20 14:39:26 类型:JS/JQUERY
字号:    
<input type="file" name="pic" id="pic" onchange="preview(this)">
			<div id="pics"></div>


function preview(file){
			    //file.files:代表选择的文件, 以数组形式存在
			    console.log(file.files[0]);
		        if (file.files && file.files[0])
		        { 
		             var src = file.files[0].name; //得到文件名
		             // aaa.JPG
		             var position = src.lastIndexOf("."); //最后一个点出现的位置
		             var ext      = src.substr(position); //得到文件的扩展名
                     var type    =  ext.toLowerCase(); //将扩展名转换为小写
                     var all = [".jpg",".gif",".jpeg",".png"];
                     if(all.indexOf(type) == -1) //查询type是否在数组中, 不在的话返回 -1
                     {  
                     	alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)!"); return false;
                     }
                     var reader = new FileReader();
                        //将文件以Data URL形式读入页面
                        reader.readAsDataURL(file.files[0]);
                        //onload 成功读取
                        reader.onload = function(){
                        	$("#pics").html('<img src="' + this.result + '" id="imgs"/>').children("img").css({"max-width":"150px"});
                        }
		        }
		   }
<