X-man

导航

HTML5文件API

 

 

File对象与File对象

Blob对象

FileReader对象

 

File对象

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>定义input type="file" 的样式</title>
        <script type="text/javascript">
            function showFileName() {
                var file;
                for (var i = 0; i < document.getElementById("file").files.length; i++) {
                    file = document.getElementById("file").files[i];
                    console.log(file.name);
                }
            }
        </script>
    </head>

    <body>
        <input type="file" id="file" multiple> /*File对象   multiple熟悉允许多个file*/
        <input type="button" onclick="showFileName()" value="上传文件"> /*显示上传的文件名*/
    </body>
</html>

 

Blob对象

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>定义input type="file" 的样式</title>
        <script type="text/javascript">
            function showFileInfo() {
                var file;
                for (var i = 0; i < document.getElementById("file").files.length; i++) {
                    file = document.getElementById("file").files[i];
                    var size = document.getElementById("size");//文件大小 单位Byte
                    size.innerHTML = file.size;
                    var type = document.getElementById("type");//文件类型
                    type.innerHTML = file.type;
                    if (!/image\/\w+/.test(file.type))/*正则表达式判断是否为图片格式*/
                        alert("请插入图片");
                    else
                        console.log("OK"); //打开浏览器审查元素 在console中显示
                }
            }
        </script>
    </head>

    <body>
        <!--File->blob:size type-->
        <input type="file" id="file" multiple>
        <!--/*File对象   multiple熟悉允许多个file*/-->
        <input type="button" onclick="showFileInfo()" value="上传文件">
        <!--/*显示上传的文件名*/-->
        <br> 文件大小：
        <span id="size"></span></br>
        文件类型：<span id="type"></span>
    </body>

</html>

 

FileReader对象

posted on 2015-08-02 18:59  雨钝风轻  阅读(191)  评论(0)  编辑  收藏  举报