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

最新推荐文章于 2024-08-28 12:34:01 发布

cgsthtm

最新推荐文章于 2024-08-28 12:34:01 发布

阅读量4.9w

点赞数 5

分类专栏： javascript 文章标签： fakepath

本文链接：https://blog.csdn.net/CGS_______/article/details/74078411

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

有时候，我们给程序添加完一个功能，在本地测试是完全可以正常运行的，但一发布到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>