`
fp_moon
  • 浏览: 984088 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

javascript获取file控件全路径

阅读更多

firefox获取全路径的方式和原理:
document.getElementById('my-file').files方法用于获取到用户所选择的文件的集合,一般情况下都是选择单一文件(貌似FireFox这样做是支持多文件选择的,不过没有试过,读者可以自己去尝试),item数组可以得到其中的某一个文件,然后我们就可以使用 nsIDOMFile所提供的属性和方法了。它包括2个属性和3个方法:

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

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

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

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

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

  有一点需要说明,方法getAsDataURL()可以取得用户所选文件的本地路径,但是这个路径的字符串文本被FireFox加密了,并且这段密文只能被FireFox识别,其它的浏览器不能识别,也就是说我将被加密后的路径直接赋值给一个img标签的src属性,在FireFox中是可以直接显示出图片的,而在IE中却不行。

 

<html>
    <head>
        <title>get file input full pathtitle>
    <script language='javascript'>
        function getFullPath(obj)
        {
            if(obj)
            {
                if (window.navigator.userAgent.indexOf("MSIE")>=1)    //ie
                {
                    obj.select();
                    return document.selection.createRange().text;
                }
                else if(window.navigator.userAgent.indexOf("Firefox")>=1)             //firefox
                {
                    if(obj.files)
                    {
                        return obj.files.item(0).getAsDataURL();
                    }
                    return obj.value;
                }
                return obj.value;
            }
        }
    </script> 
    <head>
    <body>
        <input type="file" onchange="document.getElementById('img').src=getFullPath(this);" />
    <img id="img" />
    </body>
</html>

 

分享到:
评论

相关推荐

    javascript 获取表单file全路径

    本文将深入探讨如何在IE6、IE7以及Firefox等浏览器中获取文件输入控件的全路径,并提供一个具体的解决方案。 在早期的Internet Explorer(如IE6)中,用户可以通过`&lt;input type="file"&gt;`选择文件后,直接通过该元素...

    js如何获取file控件的完整路径具体实现代码

    文章中提到的是在隐藏input file的情况下,如何在不同的浏览器中获取file控件的值,即用户选定文件的完整路径。 首先,需要了解的是,file控件的value属性通常仅包含文件的名称,而不包含完整路径。但是一些旧版的...

    解析使用JS 清空File控件的路径值

    本篇文章介绍了几种用JavaScript清空File控件的路径值的方法,并分析了这些方法的适用场景和浏览器兼容性。 首先,一种常见的方法是创建一个新的form元素,把File控件移动到这个新form中,然后调用reset方法。由于...

    单file控件批量上传文件

    在“单file控件批量上传文件”的实现过程中,JavaScript负责前端的文件选取、预览、进度显示等功能。它会遍历用户选择的每个文件,创建FormData对象,将文件添加到FormData中,然后通过XMLHttpRequest或fetch API...

    使用JS 清空File控件的路径值

    然而,由于浏览器的安全策略,JavaScript通常不能直接访问或修改File控件的选定文件路径,这是为了保护用户的隐私。但在某些场景下,如测试或用户交互设计,我们可能希望在文件上传后清除掉File控件显示的路径信息。...

    JS正确读取文件路径

    在进行 JSP 页面开发时,想要获取文件的路径,进行一些操作,常常会遇到由于 IE 安全性设置造成的不能正确读取文件路径的问题。下面将详细介绍该问题的解决方法。 问题描述 在 JSP 页面中,我们想要获取文件的路径...

    IE8上传文件时javascript取文件的真实路径的问题(\"C:\\fakepath\\xxxxx )

    5. **使用Flash或ActiveX控件**:如果必须在IE8上获取真实路径,可以考虑使用Flash或ActiveX插件,但这会增加兼容性问题和安全风险。 压缩包中的`fileupload.jsp`文件可能是一个示例或模板,用于演示如何在Java...

    控件 1_路径_

    标题中的“控件 1_路径_”似乎指的是一个与软件界面或应用程序相关的控件,其功能可能与路径操作有关。描述中的“看看噶啥的结果撒结果讲噶啥的建立根据地个大概就是大概”这部分内容较为模糊,可能是某种操作的结果...

    WebDirSelector获取本地路径

    总的来说,"WebDirSelector获取本地路径"这个话题涉及到浏览器的同源策略、JavaScript的安全限制、HTML5的File API以及可能的服务器端文件处理。在实际开发中,应优先考虑使用标准的Web技术,遵循安全规范,避免直接...

    asp.net获取HTML表单File中的路径的方法

    在***中,当一个带有File控件的表单提交时,服务器会接收到一系列的文件信息。每个文件信息都被封装为HttpPostedFile对象。每个对象包含了上传文件的相关信息,比如文件名、文件大小以及文件的内容。要获取这些信息...

    读取input:file的路径并显示本地图片的方法

    1. **获取文件**:当用户通过`&lt;input type="file"&gt;`选择文件后,可以通过JavaScript的`HTMLInputElement.files`属性访问到这个文件对象。 2. **验证文件类型**:在读取文件之前,通常需要验证文件是否是有效的图片...

    html修改FileUpload控件的浏览按钮的文字改为自定义

    - `&lt;input type="file" id="f" ...&gt;`:这是实际的文件输入控件,通过设置`style="position:absolute;filter:alpha(opacity=0);"`使其不可见。 2. **自定义按钮**: - `&lt;input type="button" ...&gt;`:这是一个...

    基于jquery跨浏览器显示的file上传控件

    4. 使用JavaScript监听file控件的onchange事件,当用户选择文件后,将文件信息显示在文本框中。 在代码实现中,定义了一个jQuery插件fileEveryWhere,它提供了一系列默认的参数设置,比如包裹层的宽度和高度、按钮...

    多文件上傳javascript控件,Ajax上傳,含C#範例

    本文将深入探讨使用JavaScript控件实现多文件上传,并结合Ajax技术以实现异步传输,同时提供C#后端处理示例。 1. **多文件上传**:在HTML5中,`&lt;input type="file" multiple&gt;`标签允许用户选择多个文件进行上传。...

    关于火狐3和ie无法浏览文件全路径问题

    ### 关于火狐3和IE无法浏览文件全路径问题 #### 背景与概述 在现代Web开发中,浏览器为了提高安全性,通常限制了直接访问本地文件的能力。特别是对于像Internet Explorer(IE)和早期版本的Mozilla Firefox这类较...

    html5 中视频路径问题解决

    1. **文件输入控件**:首先,页面中包含一个文件输入控件`&lt;input type="file"&gt;`,允许用户选择一个文件。 2. **事件监听**:当用户选择文件后,`onchange`事件触发,执行`onInputFileChange`函数。 3. **获取文件...

    JS获取文件大小方法小结

    在某些早期版本的IE浏览器中,可以设置`img`元素的`dynsrc`属性来预加载文件,然后通过`fileSize`属性获取文件大小。然而,这种方法并不普遍适用,因为它在IE7、IE8、Firefox以及Chrome等现代浏览器中可能无法正常...

    asp.net html控件的File控件实现多文件上传实例分享

    在ASP.NET中,实现多文件上传通常涉及到HTML控件中的File控件,以及服务器端的处理。本实例中,我们将探讨如何使用HTML的File控件和C#代码在VS2010环境下实现多文件上传功能。 首先,HTML部分至关重要。在`&lt;form&gt;`...

Global site tag (gtag.js) - Google Analytics