這篇文章主要介紹了js上傳圖片及預覽功能,實例分析了javascript操作圖片上傳預覽功能的實現方法,需要的朋友可以參考下

本文實例講述了js上傳圖片及預覽功能。分享給大家供大家參考。具體分析如下：

參考了網上一些人代碼寫了一個上傳圖片及時預覽的功能

1. <img id="imgTag" style="height: 100px;" alt="" /> 
2. <input type="file" /> 
3.  
4. function DisplayImage(fileTag,imgTagId){ 
5. var allowExtention=".jpg.png.gif"; 
6. var extentionArr=fileTag.value.split('.'); 
7. var extention = extentionArr[extentionArr.length-1]; 
8. if(!(allowExtention.indexOf(extention)>-1)){ 
9. alert("Please upload image!"); 
10. }else{ 
11. //for adveced broswer(the newest ie,chrome,ff) 
12. if(typeof(FileReader)!=="undefined"){ 
13. var reader = new FileReader(); 
14. reader.readAsDataURL(fileTag.files[0]); 
15. reader.onload = function(e){ 
16. document.getElementById(imgTagId).setAttribute("src", e.target.result); 
17. } 
18. }else{ 
19. //for(ie6) 
20. document.getElementById(imgTagId).setAttribute("src",fileTag.value); 
21. } 
22. } 
23. } 

希望本文所述對大家的javascript程序設計有所幫助。