javascript - 不用后台，只用js/jq/html5如何实现上传图片预览功能？

Question

不用后台，只用js/jq/html5如何实现上传图片预览功能？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

Answer 2

FileReader
html代码

<img src="" id="result" name="change-img" alt=""/>
<input type="file" id="file_input" />

js代码

    // 详情介绍页面
    var result = $("#result"); //获得最后图片显示的img
    var input = $("#file_input");

    //检测浏览器是否兼容FileReader因为这个 html5的新特性
    if (typeof FileReader === 'undefined') {
        alert("抱歉，你的浏览器不支持 FileReader");
        input[0].setAttribute('disabled', 'disabled');
        //这里加个[0]将jquery对象转化成dom对象
    } else {
        input.get(0).addEventListener('change', readFile, false);//同上
    }

    function readFile() {
        var file = this.files[0];
        if (!/image\/\w+/.test(file.type)) {
            alert("文件必须为图片！");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            result.attr("src", this.result);
        }
    }

    var result = document.getElementById("result");
    var input = document.getElementById("file_input");

    if (typeof FileReader === 'undefined') {
        result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input.setAttribute('disabled', 'disabled');
    } else {
        input.addEventListener('change', readFile, false);
    }

    function readFile() {
        var file = this.files[0];
        if (!/image\/\w+/.test(file.type)) {
            alert("文件必须为图片！");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            result.src = this.result;
        }
    }