js 预览待上传的本地图片入门实例

前端之家收集整理的这篇文章主要介绍了js 预览待上传的本地图片入门实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
js实现预览待上传的本地图片,感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。
经测试代码如下:
  1. <form name="form5" id="form5" method="post" action="#">
  2. <input type="file" name="file5" id="file5" onchange="preview5()"/>
  3. </form>
  4. <script type="text/javascript">
  5. /**
  6. * 预览待上传的本地图片
  7. *
  8. * @param
  9. * @arrange (512.笔记) jb51.cc
  10. **/
  11. function preview5(){
  12. var x = document.getElementById("file5");
  13. if(!x || !x.value) return;
  14. var patn = /\.jpg$|\.jpeg$|\.gif$/i;
  15. if(patn.test(x.value)){
  16. var y = document.getElementById("img5");
  17. if(y){
  18. y.src = "file://localhost/" + x.value;
  19. }else{
  20. var img=document.createElement("img"); img.setAttribute("src","file://localhost/"+x.value);
  21. img.setAttribute("width","120");
  22. img.setAttribute("height","90");
  23. img.setAttribute("id","img5");
  24. document.getElementById("form5").appendChild(img);
  25. }
  26. }else{
  27. alert("您选择的不是图像文件。");
  28. }}
  29. </script>
  30. // 来自:编程之家 jb51.cc(jb51.cc)

猜你在找的JavaScript相关文章