JS实现图片上传本地预览

 今天工作要中要用到JS图片预览。原理挺简单的~ 

1.首先获取上传文件的本地路径。根据不同浏览器有不同的获取方法找到一个函数可以直接调用

//获取上传图片的本地路径
function getPath(obj){
    if (obj) {
        if (navigator.userAgent.indexOf("MSIE")>0) {
            obj.select();
            // IE下取得图片的本地路径
            return document.selection.createRange().text;

        } else if(isFirefox=navigator.userAgent.indexOf("Firefox")>0) {
                if (obj.files) {
                    // Firefox下取得的是图片的数据
                    return obj.files.item(0).getAsDataURL();
                }
                return obj.value;
        }
        return obj.value;
    }
}

2.获取本地路径后写入img标签中的src属性中就可以实现图片预览了。

关于多文件上传和图片浏览结合起来的步骤。

1.因为上传文件的file标签是只读的，不能写入值。所以上传文件后把该标签隐藏起来和图片预览放在一起。再新建一个新的file标签用来上传图片