JS图片上传预览

划水摸鱼的时候研究了JS图片的上传预览，分别是FileReader()、createObjectURL()，在此分享一下！
效果图：

图片上传预览

点击放大按钮

/********** 引用的CSS **********/


/********** CSS **********/


/********** HTML **********/

    

        
+
        
点击上传图片
    
    


/********** 引用的JS **********/

FileReader()：

/****** FileReader方法 ******/
function upImage(){
    var fr = new FileReader();
    var imgFile = document.getElementById("upImage").files[0];
    if (imgFile.size > 1024 * 500 * 1){
        return alert("上传图片不能超过500KB");
    }
    if (imgFile.type != "image/png" && imgFile.type != "image/jpeg" && imgFile.type != "image/gif"){
        return alert("上传图片格式不正确");
    }
    fr.readAsDataURL(imgFile);
    fr.onload = function(){
        $(".imgDiv").html(
            '
' +
            '
' +
                '' +
                ' ' +
                '' +
            '
'
        )
        $(".imgDiv").after(
            '
' +
                '
' +
                    '
' +
                '
' +
            '
'
        );
    } 
}

createObjectURL()：

/***** createObjectURL方法 *****/
function changeImg(obj) {
    var imgSize = obj.files[0].size;
    if (imgSize > 1024 * 500 * 1) {
        return alert("上传图片不能超过500KB");
    };
    if (obj.files[0].type != 'image/png' && obj.files[0].type != 'image/jpeg' && obj.files[0].type != 'image/gif') {
        return alert("上传图片格式不正确");
    };
    var imgSrc = getObjectURL(obj.files[0]);
    $(".imgDiv").html(
        '
' +
        '
' +
            '' +
            ' ' +
            '' +
        '
'
    );
    $(".imgDiv").after(
        '
' +
        '
' +
        '
' +
            '
' +
        '
'
    );
}

//建立可存取到该file的url
function getObjectURL(file) {
    var url = null;
    //下面函数执行效果是一样的，只是针对不同的浏览器执行不同的js函数而已
    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;
}

其他所需方法：

//鼠标hover显示删除和放大图片
$(function () {
    $(".imgDiv").mouseenter(function () {
        $(".otherIcon").css("display", "block");
    })
    $(".imgDiv").mouseleave(function () {
        $(".otherIcon").css("display", "none");
    })
})

//删除图片
function delIcon() {
    $(".imgDiv").html(
        '
' +
            '
+
' +
            '
点击上传图片
' +
        '
' +
        ''
    );
    $("#magnifyModal").remove();
}

//放大图片
function magnifyIcon() {
    var magnifyImgSrc = document.getElementById('imgPreview').src;
    $("#magnifyModal .modal-content").html('
');
    $("#magnifyModal").modal("show");
}

对比：

名称	FileReader	createObjectURL
兼容性	IE10及以上	IE10及以上
执行机制	异步执行（宏任务 - 回调方式）	同步执行
返回值	获取一段data:base64的字符串	获取当前文件的一个内存URL
内存使用	FileReader.readAsDataURL返回文件的base64字符串，比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）	createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放
使用场景	如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL	使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存

总结：FileReader()和createObjectURL()均不支持IE10以下的浏览器，从性能优化角度来说，createObjectURL()可能相对较好