firefox3不能获得html file的全路径的问题
今天这个问题困扰了我很久,就是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;