js 上传图片预览

上传控件：

<input id="fileMaterial_staff" name="fileMaterial" type="file" accept="image/*" οnchange="isCorrectFileType(this)" value="" />

选择文件后触发onchange事件

</pre><pre name="code" class="javascript">function isCorrectFileType(file){
	 var validExtensions = new Array(".png", ".gif",".jpg",".jpeg");    
	 var fileExtension = file.value;    
	 fileExtension = fileExtension.substring(fileExtension.lastIndexOf('.'));    
	 if (validExtensions.indexOf(fileExtension) < 0) {    
	     art.dialog.tips("只有" + validExtensions.toString() + "类型的文件才允许上传!",3);    
	      // Clean file info.    
	      file.value = "";    
	      return false;    
	 }
	 
	 var file1 = document.getElementById(inputId).files[0];//关键部分获得file对象 返回的实际是个file数组  file对象继承自Blob对象                               var reader=new FileReader();//HTML5新方法                                                                                                                 var base64str=reader.readAsDataURL(file1);//方法一将图片文件以DATA URL方法读取                                                                            $("img").attr("src",base64str)//                                                                                                     
	 var url=URL.createObjectURL(file1)//方法二
	 <pre name="code" class="javascript">         $("img").attr("src",url)//  

}

参考资料:

www.w3.org

http://www.w3.org/TR/FileAPI/#dfn-Blob

https://docs.webplatform.org/wiki/apis/file