图片上传预览功能

1，FileReader接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去。
2， 通过FileReader接口中的readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。

 注意：当访问不同的文件时，必须重新调用FileReader的构造函数，也就是重新new一个FileReader对象，因为每调用一次，FileReader对象都将返回一个新的FileReader实例，只有这样，才能实现访问不同文件的数据

<div>
<input id="file" type="file" accept="image/*" οnchange="getImgURL(this);" /> 
<img id="showfile"src="/img/xx.jpg" width="80px"  />
</div>
<script>

function getImgURL(node) {//获取浏览器中异步访问文件系统中的数据
  var imgURL = "";     
  try{    
   var file = null; 
   if(node.files && node.files[0] ){ 
    file = node.files[0];  
   }else if(node.files && node.files.item(0)) {                                 
    file = node.files.item(0);    
   }    
   //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径 
   try{ 
    //Firefox7.0  
    imgURL =  file.getAsDataURL();   
    //alert("//Firefox7.0"+imgRUL);                          
   }catch(e){ 
    //Firefox8.0以上                               
    imgURL = window.URL.createObjectURL(file); 
    //alert("//Firefox8.0以上"+imgRUL); 
   } 
   }catch(e){    
   //这里不知道怎么处理了，如果是遨游的话会报这个异常                  
   //支持html5的浏览器,比如高版本的firefox、chrome、ie10 
   if (node.files && node.files[0]) {                           
    var reader = new FileReader();  
    reader.onload = function (e) {                                       
     imgURL = e.target.result;   
    }; 
    reader.readAsDataURL(node.files[0]);  
   }   
   }  

    var pic = document.getElementByIdx_x("showfile");
    pic.src = imgURL；
  }  

</script>