firefox3不能获得html file的全路径的问题 -

wencan83

浏览: 40705 次
性别:
来自: 深圳

最近访客更多访客>>

fuhsea

dbld12

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (39)

社区版块

存档分类

firefox3不能获得html file的全路径的问题

HTML ASP Firefox JavaScript CSS

今天这个问题困扰了我很久，就是firefox3不能获得html file的全路径的问题

因为我做的电子商务网站是要在firefox上面运行的，在后台管理中，需要一个

添加图片的功能，添加图片的时候是需要使用js来预览上传的图片的，所以需要

做一个这样的功能。

一开始我是以为只要用imgFile.value就可以获取上传文件控件的文件的绝对路径。

<script language="javascript" type="text/javascript"> 

    function PreviewImg(imgFile) { 

        var newPreview = document.getElementById("imgfengmian"); 

        newPreview.src = imgFile.value; 

    } 

</script>

但是在测试的时候，发现firefox的情况下，只能获取文件的文件名，在IE下则可获取文件的绝对路径，

上网查了一下资料，原来firefox已经禁用了这个value的属性来获取文件的绝对路径，因为firefox以

安全问题，把获取路径给禁用了，有些hacker可以利用这个文件路径将文件上传到服务器。

之后我找到了一个解决方法，就是利用firefox提供的函数来获取获取文件路径的问题

<script language="javascript" type="text/javascript"> 

    function PreviewImg(imgFile) { 

        var newPreview = document.getElementById("imgfengmian"); 

        alert(imgFile.files.item(0).getAsDataURL()); 

    } 

</script>

这样，就会输出文件的路径，但是这个文件的路径是经过firefox加密的，如下图

整个页面的HTML代码，可以上传文件后通过预览来看见上传的图片

<%@ Page Title="商品管理-淘书网" Language="C#" MasterPageFile="~/admin/adminMain.master" 

    AutoEventWireup="true" CodeFile="productmanage.aspx.cs" Inherits="admin_productmanage" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="M_ContentPlaceHolder" runat="Server"> 

    <script language="javascript" type="text/javascript"> 

        function PreviewImg(imgFile) { 

            var newPreview = document.getElementById("imgfengmian"); 

            newPreview.src = imgFile.files.item(0).getAsDataURL(); 

            alert(imgFile.value); 

            alert(imgFile.files.item(0).getAsDataURL()); 

        } 

    </script> 

    <link href="../css/productmanage.css" rel="stylesheet" type="text/css" /> 

    <div id="camanager" class="round2"> 

        <h3> 

            添加商品</h3> 

        <div class="con"> 

            <asp:ScriptManager ID="ScriptManager1" runat="server"> 

            </asp:ScriptManager> 

            <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 

                <ContentTemplate> 

                    <p> 

                        商品名称：<asp:TextBox ID="txtname" runat="server"></asp:TextBox> 

                    </p> 

                    <p> 

                        所属类别：<asp:DropDownList ID="ddlca" runat="server" DataSourceID="ObjectDataSource1"

                            DataTextField="caName" DataValueField="categoryId"> 

                        </asp:DropDownList> 

                    </p> 

                    <p> 

                        商品价格：<asp:TextBox ID="txtprice" runat="server"></asp:TextBox> 

                    </p> 

                    <p> 

                        作    者：<asp:TextBox ID="txtauthor" runat="server"></asp:TextBox> 

                    </p> 

                    <p> 

                        出 版 社：<asp:TextBox ID="txtpublisher" runat="server"></asp:TextBox> 

                    </p> 

                    <p> 

                        商品封面：<asp:FileUpload ID="fulfengmian" runat="server" onchange="PreviewImg(this)" /> 

                        <img id="imgfengmian" alt="" src="" height="110px" width="110px" /> 

                    </p> 

                    <p> 

                        商品库存：<asp:TextBox ID="txtquan" runat="server"></asp:TextBox> 

                    </p> 

                    <p> 

                        商品介绍：<asp:TextBox ID="txtintro" runat="server" Columns="40" Rows="6" TextMode="MultiLine"></asp:TextBox> 

                    </p> 

                    <p> 

                        <asp:Button ID="btnadd" runat="server" Text="添加" /> 

                        <input id="Reset1" type="reset" value="重置" /><asp:ObjectDataSource ID="ObjectDataSource1"

                            runat="server" SelectMethod="GetAllCategory" TypeName="EeconomicBLL.CategoryManager"> 

                        </asp:ObjectDataSource> 

                    </p> 

                </ContentTemplate> 

            </asp:UpdatePanel> 

        </div> 

        <div class="footer"> 

            <p> 

                 </p> 

        </div> 

    </div> 

</asp:Content>

firefox里面提供的方法的总结

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>input type=file & Firefox 3</title> 

</head> 

<body> 

<h1>input type=file & Firefox 3</h1> 

<script type="text/javascript"> 

// <![CDATA[ 

function inputFileOnChange() {     

    if(document.getElementById('my-file').files) { 

        // Support: nsIDOMFile, nsIDOMFileList 

        alert('value: ' + document.getElementById('my-file').value); 

        alert('files.length: ' + document.getElementById('my-file').files.length); 

        alert('fileName: ' + document.getElementById('my-file').files.item(0).fileName); 

        alert('fileSize: ' + document.getElementById('my-file').files.item(0).fileSize); 

        alert('dataurl: ' + document.getElementById('my-file').files.item(0).getAsDataURL()); 

        alert('data: ' + document.getElementById('my-file').files.item(0).getAsBinary()); 

        alert('datatext: ' + document.getElementById('my-file').files.item(0).getAsText("utf-8")); 

    }; 

}; 

// ]]>

</script> 

<div> 

    <input type="file" name="my-file" id="my-file" onchange="inputFileOnChange();" /> 

</div> 

</body> 

</html>

fileName ：用于获取到用户所选文件的名称，这和直接取value值所得到的结果一样。

fileSize ：得到用户所选文件的大小。

getAsBinary() ：得到用户所选文件的二进制数据。

getAsDataURL() ：得到用户所选文件的路径，该路径被加密了，目前只能在FireFox中使用。

getAsText() ：得到用户所选文件的指定字符编码的文本。

ie6中

var file_url = document.getElementById("file").value;

ie7.8

var file = document.getElementById("file");   

file.select();   

var file_url = document.selection.createRange().text;

分享到：

在不同浏览器中获取File Input的路径 | 正则表达式检验URL

2011-06-19 21:13
浏览 1625
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

firefox3不能获得html file的全路径的问题

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

firefox3不能获得html file的全路径的问题

评论

发表评论

相关推荐

最近访客更多访客>>