今天工作要中要用到JS图片预览。原理挺简单的~ 

1.首先获取上传文件的本地路径。根据不同浏览器有不同的获取方法找到一个函数可以直接调用

  1. //获取上传图片的本地路径 
  2. function getPath(obj){ 
  3.     if (obj) { 
  4.         if (navigator.userAgent.indexOf("MSIE")>0) { 
  5.             obj.select(); 
  6.             // IE下取得图片的本地路径 
  7.             return document.selection.createRange().text; 
  8.              
  9.         } else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) { 
  10.                 if (obj.files) { 
  11.                     // Firefox下取得的是图片的数据 
  12.                     return obj.files.item(0).getAsDataURL(); 
  13.                 } 
  14.                 return obj.value; 
  15.         } 
  16.         return obj.value; 
  17.     } 

2.获取本地路径后写入img标签中的src属性中就可以实现图片预览了。

关于多文件上传和图片浏览结合起来的步骤。

1.因为上传文件的file标签是只读的,不能写入值。所以上传文件后把该标签隐藏起来和图片预览放在一起。再新建一个新的file标签用来上传图片