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

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

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

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

 

 实现代码：

            

                图片上传前预览：
                
                
            
            
            

        
        

        

 

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

 

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

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

选择文件：

using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Security.Cryptography; using System.Text; using System.Web; /// /// åå«MD5å å¯ï¼DESå å¯è§£å¯ /// public class Secret { //DES8ä½ç§é¥ private const string desKey = "xlkxlk33"; #region DESå å¯ è§£å¯ /// /// DESå å¯å­ç¬¦ä¸² /// ///å¾å å¯çå­ç¬¦ä¸² ///å å¯å¯é¥,è¦æ±ä¸º8ä½ ///å å¯æåè¿åå å¯åçå­ç¬¦ä¸²ï¼å¤±è´¥è¿åæºä¸² public static string EncryptDES(string encryptString) { try { byte[] rgbKey = Encoding.UTF8.GetBytes(desKey); byte[] rgbIV = { 0x12, 0x34, 0x56, 0x78, 0x90, 0xAB, 0xCD, 0xEF }; byte[] inputByteArray = Encoding.UTF8.GetBytes(encryptString); DESCryptoServiceProvider dCSP = new DESCryptoServiceProvider(); MemoryStream mStream = new MemoryStream(); CryptoStream cStream = new CryptoStream(mStream, dCSP.CreateEncryptor(rgbKey, rgbIV), CryptoStreamMode.Write); cStream.Write(inputByteArray, 0, inputByteArray.Length); cStream.FlushFinalBlock(); return Convert.ToBase64String(mStream.ToArray()); } catch { return encryptString; } } /// /// DES解å¯å­ç¬¦ä¸² /// ///å¾è§£å¯çå­ç¬¦ä¸² ///解å¯å¯é¥ï¼è¦æ±8ä½ /// public static string DecryptDES(string decryptString) { try { //é»è®¤å¯é¥åé byte[] Keys = { 0x12, 0x34, 0x56, 0x78, 0x90, 0xAB, 0xCD, 0xEF }; byte[] rgbKey = Encoding.UTF8.GetBytes(desKey); byte[] rgbIV = Keys; byte[] inputByteArray = Convert.FromBase64String(decryptString); DESCryptoServiceProvider DCSP = new DESCryptoServiceProvider(); MemoryStream mStream = new MemoryStream(); CryptoStream cStream = new CryptoStream(mStream, DCSP.CreateDecryptor(rgbKey, rgbIV), CryptoStreamMode.Write); cStream.Write(inputByteArray, 0, inputByteArray.Length); cStream.FlushFinalBlock(); return Encoding.UTF8.GetString(mStream.ToArray()); } catch { return decryptString; } } #endregion #region MD5å å¯ /// /// MD5å å¯ /// ////// public static string MD5(string s) { var md5 = new System.Security.Cryptography.MD5CryptoServiceProvider(); var result = ""; if (!string.IsNullOrWhiteSpace(s)) { result = BitConverter.ToString(md5.ComputeHash(UnicodeEncoding.UTF8.GetBytes(s.Trim()))); } return result; } #endregion }

 实现代码：

        

            选择文件：
            
            
            
            
            
            

        

 

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

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

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

　　

点此下载

实现代码：

            
            
点此下载
        
        

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

转载于:https://www.cnblogs.com/wt627939556/p/6369510.html