使用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("<img src='" + objURL + "' alt='Alternate Text' width='640px' height='350px' id='target' />");
        cutImg();//自定义的裁剪图片函数
    });

5.例子

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>文件上传</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <link href="jquery.Jcrop.min.css" rel="stylesheet" />
    <script src="../artDialog/artDialog.source.js?skin=default"></script>
    <script src="../artDialog/plugins/iframeTools.js"></script>
    <script src="../artDialog/msgBox.js" type="text/javascript"></script>
    <script src="jquery.min.js"></script>
    <script src="jquery.Jcrop.min.js"></script>
    <script src="jquery.color.js"></script>
    <style type="text/css">
        body {
            font: Arial, Helvetica, sans-serif;
            color: #000;
            line-height: 24px;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript">
        art.dialog.data('FileName', '<%=FileName %> ');
        art.dialog.data('FileSize', '<%=FileSize %> ');
        art.dialog.data('FilePath', '<%=FilePath %> ');
    </script>
</head>

<body style="background-color: White">

    <form id="form1" runat="server">
        <table border="0" cellpadding="1" cellspacing="0" style="height: 550px; width: 650px">
            <tr height="350">
                <td colspan="2">
                    <div id="imgContainer" style="width: 640px; height: 350px; border: 1px solid #c0c0c0">
                        <h3>点击浏览按钮,请选择要上传的图片</h3>
                    </div>
                    <input type="hidden" name="x1" id="x1" value="" runat="server" />
                    <input type="hidden" name="x2" id="x2" value="" runat="server" />
                    <input type="hidden" name="y1" id="y1" value="" runat="server" />
                    <input type="hidden" name="y2" id="y2" value="" runat="server" />
                    <input type="hidden" name="w" id="w" value="" runat="server" />
                    <input type="hidden" name="h" id="h" value="" runat="server" />
                </td>
            </tr>
            <tr height="30">
                <tr height="30">
                    <td align="left">  
                                <input id="PictureUrl" runat="server" name="File1" type="file" /></td>
                    <asp:ScriptManager ID="ScriptManager1" runat="server" />
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
                        <ContentTemplate>

                            <td width="81" align="left">
                                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="上传" Width="60px" CausesValidation="False" /></td>
                            </tr>
                        <td class="inputexplain" style="padding-left: 5px" colspan="2">
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" BackColor="#FFC0C0"
                                BorderWidth="1px" ControlToValidate="PictureUrl" Display="Dynamic" ErrorMessage="请选择您要上传的文件"
                                SetFocusOnError="True" Width="138px"></asp:RequiredFieldValidator>
                            <asp:Label ID="LB_PicError" runat="server" BackColor="#FFC0C0" BorderWidth="1px"
                                ForeColor="Red" Text="文件上传失败!" Visible="False" Width="343px"></asp:Label>
                            <asp:Label
                                ID="LB_Success" runat="server" BackColor="#C0FFFF" BorderWidth="1px" ForeColor="Teal"
                                Text="文件上传成功!" Visible="False" Width="122px"></asp:Label><asp:Label ID="LB_Fail"
                                    runat="server" BackColor="#FFC0C0" BorderWidth="1px" ForeColor="Red" Text="文件上传失败!"
                                    Visible="False" Width="126px"></asp:Label><br>
                            <%=hint %></td>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="Button1" />
                        </Triggers>
                    </asp:UpdatePanel>
                </tr>
        </table>
    </form>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {

    });
    $(document).on('change', '#PictureUrl', function () {
        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]);
        $('#imgContainer').html("<img src='" + objURL + "' alt='Alternate Text' width='640px' height='350px' id='target' />");
        cutImg();
    });

    function cutImg() {
        var jcrop_api;
        $('#target').Jcrop({
            bgFade: true,
            bgOpacity: .2,
            setSelect: [45, 55, 607, 320],
            onChange: showCoords,
        }, function () {
            jcrop_api = this;
        });
    }
    function showCoords(c) {
        $('#x1').val(c.x);//通过<input type='hidden' runat='server'>给后台提供选框的宽高
        $('#y1').val(c.y);
        $('#x2').val(c.x2);
        $('#y2').val(c.y2);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };
</script>





评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值