html之file标签 --- 图片上传前预览 -- FileReader

　记得以前做网站时，曾经需要实现一个图片上传到服务器前，先预览的功能。当时用html的标签一直实现不了，最后舍弃了这个标签，使用了其他方式来实现了这个功能。

　　今天无意发现了一个知识点，用html的file标签就能实现图片上传前预览，感觉很棒，记录一下！就是通过file标签和js的FileReader接口，把选择的图片文件调用readAsDataURL方法，把图片数据转成base64字符串形式显示在页面上。

1、闲话少说，测试一下，图片上传前预览(选择图片)：

  

 

 实现代码：

            

                图片上传前预览：
                
                
            
            
            

        
        

        

 

-------------------------------  end  -----------------------------

 

2、另外 FileReader除了有函数readAsDataURL，另外还有另外两个函数readAsBinaryString 和 readAsText，分别可以将选择的文件读取成二进制和文本格式 

测试一下，选择文本(txt、cs、html、js、css、xml)，读取成二进制或者文本：

选择文件：     

 

 实现代码：

        

            选择文件：
            
            
            
            
            
            

        

 

 ---------------------------

3、----------- a标签之download属性 -------------

　　 设置a标签href为图片链接，再设置download属性，点此链接可以直接下载图片

　　

点此下载

实现代码：

            
            
点此下载
        
        

原文链接：http://www.cnblogs.com/tandaxia/p/5125275.html