zoukankan      html  css  js  c++  java
  • HTML5之FileReader的使用(转)

    HTML5之FileReader的使用

    http://blog.csdn.net/jackfrued/article/details/8967667
    

    MDN : 代码

    <!doctype html>
    <html>
    
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <title>Image preview example</title>
        <script type="text/javascript">
            oFReader = new FileReader(), rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
    
            oFReader.onload = function (oFREvent) {
                debugger
                document.getElementById("uploadPreview").src = oFREvent.target.result;
                <!-- 读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读. -->
            };
    
            function loadImageFile() {
                if (document.getElementById("uploadImage").files.length === 0) { return; }
                var oFile = document.getElementById("uploadImage").files[0];
                if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
                debugger
                oFReader.readAsDataURL(oFile);
                // 该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
            }
    
        </script>
    </head>
    
    <body onload="loadImageFile();">
        <form name="uploadForm">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <img id="uploadPreview" style=" 100px; height: 100px;" src=""
                                alt="Image preview" />
                        </td>
                        <td>
                            <input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" />
                        </td>
                    </tr>
                </tbody>
            </table>
    
            <p>
                <input type="submit" value="Send" />
            </p>
        </form>
    </body>
    
    </html>
    

    MDN 详解

    https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
  • 相关阅读:
    json取值(key是中文或者数字)方式详解
    快速排序
    百度地图 获取矩形point
    ArcGIS
    天眼
    shapefile文件
    SQL Server 2008 的gis函数
    查看某一个点是否在某个多边形内 使用ST_Contains函数
    PostgreSQL+PostGIS的使用 函数清单
    地理坐标计算
  • 原文地址:https://www.cnblogs.com/ar13/p/8099539.html
Copyright © 2011-2022 走看看