使用js获取input file的路径C:\fakepath\问题

有时候，我们给程序添加完一个功能，在本地测试是完全可以正常运行的，但一发布到Web上就各种报错，这时候我们就需要注意啦！

1.问题

页面有一个input file服务器控件，一个div，div是image标签的容器，当点击input file的值改变，我们往div里追加image标签；

但当通过js的onchange事件动态获取input file 的路径的时候，发现console.log(path)打印出的路径是被浏览器屏蔽的，例如：C:\fakepath\file.jpg

2.原因

由于浏览器的安全机制，当我们获取input file的路径时被fakepath代替，隐藏了真实物理路径。

当然，调整浏览器的浏览器安全设置可以解决这个问题，但是这种解决办法显然不是我们想要的，不可能让每个用于都去设置浏览器安全选项。

3.认识window.URL.createObjectURL()

URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL，这个URL的生命仅存在于它被创建的这个文档里，新的对象URL指向执行的File对象或Blob对象。

语法：objcetURL = window.URL.createObjectURL(file || blob);

参数：File对象和Blob对象；File对象就是一个文件，比如我用file type="file"标签来上传文件，那么里面的每个文件都是一个file对象。Blob对象就是二进制数据，比如在XMLHttpRequest里，如果指定requestType为blob，那么得到的返回值也是一个blob对象。

每次调用createObjectURL的时候，一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.，如果你不再需要这个对象，要释放它，需要使用URL.revokeObjectURL()方法.。当页面被关闭，浏览器会自动释放它，但是为了最佳性能和内存使用，当确保不再用得到它的时候,就应该释放它。

4.解决办法

$(document).on('change', '#PictureUrl', function () { //PictureUrl为input file 的id
        //console.log(this.files[0]);
        function getObjectURL(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;
        }
        var objURL = getObjectURL(this.files[0]);//这里的objURL就是input file的真实路径
        $('#imgContainer').html("");
        cutImg();//自定义的裁剪图片函数
    });

5.例子

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpFileBox.aspx.cs" Inherits="PublicPage_UpFileBox" %>





    
    
    
    
    
    
    
    
    
    
    




    

        
                    
                        

                            
                            
                        

            

                

                    

                        
点击浏览按钮，请选择要上传的图片
                    
                    
                    
                    
                    
                    
                    
                
            
            

                

                    
  
                                
                    

                                
                            
                        

                            
                            
                            

                            <%=hint %>