图片上传本地图片预览（兼容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）错误的提示，很烦的

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