通过input框上传图像并预览

HTML 如下：

<input type="file" name="upImg">
<input type="text">
<div id="showImage">
    <img src="" alt="">
</div>

JS如下：选择图片后，显示文件名，并预览图片

$(document).on('change', 'input[name="upImg"]', function (e) {
    var fileName = this.files[0].name;
    if (fileName != '' && fileName != undefined) {
        var fileSize = 0;
        var extStart = fileName.lastIndexOf(".");
        var ext = fileName.substring(extStart, fileName.length).toUpperCase();
        //判断是否符合格式要求
        if (ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
            alert("图片必须为png,gif,jpeg,jpg格式");
            $(this).val('');
            return false;
        } else {
            fileSize = this.files[0].size;
            var size = (fileSize / 1024).toFixed(2);//单位转换：kb转M
            //图片限制在20M以下
            if (size > 20480) {
                alert("图片大小不能超过20M");
                $(this).val('');
                return false;
            } else {
                var objUrl = getObjectURL(this.files[0]); //blob:http://localhost:63342/5765b9f5-f68c-47df-b043-ac8fbd74b04e
                if (objUrl) {
                    $("#showImage img").attr("src", objUrl);
                    $(this).next("input").val(fileName);
                    var src = $("#showImage img").attr("src");
                    //图片加载后, 释放对象 URL
                    $("#showImage img").on('load', function (e) {
                        removeObjectURL(src);
                    });
                }
            }
        }
    }
});

将图像源设置为表示该文件的新对象 URL（blob url）

function getObjectURL(file) {
    var url = null;
    // 处理浏览器兼容
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

释放通过URL.createObjectURL() 创建的 URL 对象。调用这个方法不会立即释放内存，只是让浏览器知道不用在内存中继续保留对这个文件的引用了，允许平台在合适的时机进行垃圾收集。

function removeObjectURL(src) {
    if (window.revokeObjectURL != undefined) { // basic
        window.revokeObjectURL(src);
    } else if (window.URL != undefined) { // mozilla(firefox)
        window.URL.revokeObjectURL(src);
    } else if (window.webkitURL != undefined) { // webkit or chrome
        window.webkitURL.revokeObjectURL(src);
    }
}

页面如下：

用于在浏览器上预览本地图片或者视频

注意：

预览视频时，将window.URL.createObjectURL生成的URL，赋给video中的src标签，没有使用source标签。像腾讯，优酷都是这么做的。