图片上传本地图片预览（兼容ie10）

　　　近期做了一个小项目，要实现一个功能，多张图片上传并且需要有缩略图

，然后用户在上传图片之前要确认一下自己的上传的是什么图片，是否需要修改，SO————如何读取文件路径呢？

首先，我们有一个input

<input type="file" class="business_picture_Input" id="step2_inputFileImg1" name="step2_inputFileImg1">

然后当我们点击这个input的时候

 $(".business_picture_Input").change(function () {
                console.log(getPath(this));　　　　　　　　//显示一下图片的路径
 });

function getPath(obj) {
                if (obj) {
                    if (navigator.userAgent.indexOf("MSIE") > 0 && !(navigator.userAgent.indexOf("MSIE 10.0") > 0)) {
                        obj.select();
                        obj.blur();
                        // IE下取得图片的本地路径            
                        console.log(document.selection.createRange().text);
                        return document.selection.createRange().text;
                    } else {
                        if (obj.files) {
                            if (navigator.userAgent.indexOf("MSIE 10.0") > 0) {
                                console.log("obj对象—————— " + obj.files);
                                var objectURL = window.URL.createObjectURL(obj.files[0]);
                            } else {
                                // 其他浏览器下取得的是图片的数据 （webkit要使用webkitURL）
                                var objectURL = (window.webkitURL ? webkitURL : URL).createObjectURL(obj.files.item(0));                                
                            }
                            return objectURL;
                        }
                        return obj.value;
                    }
                    return obj.value;
                }
            }

好的，在getPath（obj）函数里面就要区分一下浏览器的不同了

　　火狐，新版chrome：　　

objectURL = window.URL.createObjectURL(obj.files.item(0));
return objectURL;

　　旧版chrome（国产良心自制浏览器的兼容模式）：

objectURL = window.webkitURL.createObjectURL(obj.files.item(0));
return objectURL;

　　IE（7-8）（ie6神马的让他回家玩蛋蛋吧，明年xp就over了，不管它）：

　　　　obj.select();
        obj.blur();
       // IE下取得图片的本地路径            
       console.log(document.selection.createRange().text);
       return document.selection.createRange().text;

　　额，好像出现了奇怪的东西——obj.blur(); 这玩意是干嘛的？好吧，这是ie9的尿性（我喜欢这个词），ie9在file控件下获取焦点情况下 document.selection.createRange() 将会拒绝访问，所以我们要

　　失去下焦点。

　　IE10：　

var objectURL = window.URL.createObjectURL(obj.files[0]);
return objectURL

　　好吧，这看起来应该是火狐的写法，但是要注意的是获取的filelist对象有点不一样，obj.files[0]（ps：ie10取消了滤镜功能，所以不能用ie7-9的方法了）

然后，让我们把路径添加到页面上：

var imgType = $(this).val();
                if (imgType.indexOf(".jpg") > 0 || imgType.indexOf(".png") > 0 || imgType.indexOf(".jpeg") > 0 || imgType.indexOf(".gif") > 0 || imgType.indexOf(".bmp") > 0) {
                    if (navigator.userAgent.indexOf("MSIE") > 0 && !(navigator.userAgent.indexOf("MSIE 10.0") > 0)) {
                        $(this).parent().prev("div").css({ "display": "block" });
                        $(this).parent().prev().get(0).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        $(this).parent().prev().get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = getPath(this);
                    } else {                    
                        $(this).parent().prevAll("img").css({ "display": "block" });
                        $(this).parent().prevAll("img").attr("src", getPath(this));
                    }
                } else {
                    alert("亲爱的用户，您选择的文件不是一张支持图片哦，再试试另一张吧");
                }

嗯，这里要稍微注意下，如果是ie滤镜方式预览本地图片的话要把滤镜css放在一个div内，而不是放在img内，不然会出现图片无法正常显示（src）错误的提示，很烦的

嗯，差不多就这么多了。。嗯，就这么多了