用html5的file api作一个简单的上传图片预览

时间 2019-11-08

标签 html5 html file api 一个简单上传图片预览栏目 HTML5 繁體版

原文原文链接

html5的file api确实很是给力, 能够读到file选择文件的不少信息, 下面实现一个如何使用file api实现一个简单的上传图片预览html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file</title>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
    <input type="file" id="file-upload" accept="image/*"/>
    <script>
    $("#file-upload").on("change", function(e){
        console.log(e);
        var file = this.files[0];
        console.log(this.files.length);
        var img = document.createElement("img");
        img.height="120";
        img.width="120";
        img.file = file;
        $("body").append(img);
        var reader = new FileReader();
        reader.onload = function(e){
            console.log(e);
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    });
    </script>
</body>
</html>

chrome 和 firefox最新版都经过html5

那么如何重置呢, 只须要将file元素的value等于""就OK了jquery