用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>