解决浏览器 fakepath 实现图片上传预览

fakepath是什么？

这是浏览器处于安全性考虑的，比如文件路径会暴露你的用户名或者其他内容，而通过fakepath直接代替了其中的路径名，保护隐私和安全。至于IE6为什么可以，这个就不用说了吧…
解决办法：工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”即可。
但是这是需要用户去操作的啊，现在需要的是代码去解决_.

代码解决

需要导入jQuery
js代码：

$(function() {

			$("#myfile").change(function() { // 更改对象-复用性
				var $file = $(this);
				var fileObj = $file[0];
				var windowURL = window.URL || window.webkitURL;
				var dataURL;
				var $img = $("#previewImg img"); // 更改对像-复用性

				if(fileObj && fileObj.files && fileObj.files[0]) {
					dataURL = windowURL.createObjectURL(fileObj.files[0]);
					$img.attr('src', dataURL);
				} else {
					dataURL = $file.val();
					var imgObj = document.getElementById("preview"); // 存放到要展示的dom
					// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
					// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
					imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
					imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

				}
			});

		});

html代码：

<form action="" method="post">
				请选择图片： <input id="myfile" name="myfile" type="file" value="" />
				<div id="previewImg">
					<img id="preview" src="" />
				</div>
</form>

封装后的灵活性更强

工具代码：

function getInputURL(file) {
		var url = null;
		if(window.createObjcectURL != undefined) {
				url = window.createOjcectURL(file);
		} else if(window.URL != undefined) {
				url = window.URL.createObjectURL(file);
		} else if(window.webkitURL != undefined) {
				url = window.webkitURL.createObjectURL(file);
		}
	return url;
}

使用：

$("#myfile2").change(function() {
			var file = this.files[0];
			var url = getObjectURL(file); //blob:http://127.0.0.1:8020/f6b0f825-f59e-4f36-a470-db0ee8ba3906
			$("#preview2").attr({
				src:url
			});
		});

html代码：

<div class="row">
			<img id="preview2" src="" width="80px" height="80px" />
			<form action="" method="post">
				请选择图片： <input class="" id="myfile2" name="myfile2" type="file" value="" />
			</form>
			<div id="large2">预览</div>
		</div>