在传统的图片预览编程中,必须上传到服务器,获取到服务器生成的图片路径,才能在页面中呈现该图片,但是在HTML5中就不需要这么麻烦了,HTML5提供了文件读取的API,可以直接读取本机图片,然后用img标签将该图片呈现出来即可。 效果演示:http://plter.github.io/learnjs/ReadLocalFile/ 示例代码如下
/**
 * Created by plter on 10/10/16.
 */
(function () {

    var fileInput = $("input[type='file']");
    var btnBrowse = $("#btn-browse");
    btnBrowse.button();

    var fileReader = new FileReader();
    fileReader.onload = function (e) {
        var img = new Image();
        img.src = this.result;
        img.style.display = "block";
        document.body.appendChild(img);
    };

    btnBrowse.click(function () {
        fileInput.click();
    });

    fileInput.on("change", function (e) {
        if (this.files && this.files.length) {
            fileReader.readAsDataURL(this.files[0]);
        }
    });
})();