实时显示从file输入框中打开的图片C:\fakepath路径错误等问题

简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览图片

1、问题的原因

html代码：

<input id="file_upload" type="file" />
<div class="image_container">
    <img id="uploadImg" style="height:130px;width:117px;border-width:0px;"/>
</div>
<script>
    $(function(){
	    $("#file_upload").on("change",function () {
	    	$("uploadImg").attr("src",$(this).val());
	    });
    });
<script>

在控制台中，由于处于安全性等问题，大多数的浏览器（火狐、谷歌等）将真实的本地路径给加密转化成C:\fakepath\1.png，不能实际获取到其本地的真实路径，则在页面中就显示该虚拟路径，则无法访问到该路径，

但是，在ie浏览器中是可以直接获取当前本地的真实路径，并显示在页面中，所以不同的浏览器，对input file的属性的解析都会有所不同。

2、处理方法：

<script>
$(function(){
	$("#file_upload").on("change",function () {
	    var $file = $(this);
	    var fileObj = $file[0]; 
	    var windowURL = window.URL || window.webkitURL;
	    var dataURL;
	    var $img = $("uploadImg"); 
	    if (fileObj && fileObj.files && fileObj.files[0]) {            
            //非ie浏览器直接获取本地的真实路径
            dataURL = windowURL.createObjectURL(fileObj.files[0]);
        } else {
            //ie浏览器直接获取本地的真实路径
            dataURL = $file.val();
        }
        $img.attr('src', dataURL);
	 });
});
</script>

window.URL || window.webkitURL的作用：

        URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(fileObj .files[0]);获得一个http格式的url路径，这个时候就可以设置到<img>中显示了。
window.webkitURL和window.URL是一样的，window.URL标准定义，window.webkitURL是webkit内核的实现（一般手机上就是使用这个），还有火狐等浏览器的实现。