`
yukar
  • 浏览: 127933 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

JS获取表单里文件选择框的文件路径

阅读更多

表单代码

<form name="myexcel" action="" enctype="multipart/form-data" method="post">
<table width="800" border="1" align="center">
  <tr>
    <td width="213" align="right" >inputFile位置:</td>
    <td width="661"><input type="text" size="60" name="toDir" id="toDir" />
        <input type="button" onclick="javascript:inputDir();" value="JS获取" />
    </td>
  </tr>
  <tr>
    <td align="right">导入文件:</td>
    <td><input type="file" id="path" name="path" size="60" /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" value="整理" name="button1" /></td>
  </tr>
</table>
</form>

 JS代码

function getFilePath(filePathId){
    //判断浏览器类型
    var isIE = (document.all) ? true : false;
    var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);
    var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);	
    var path = '';
    if(isIE7 || isIE8)
    {
        var file = document.getElementById(filePathId);
        file.select();
        path = document.selection.createRange().text;
        document.selection.empty();
    }else{
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        }catch (e) {
            alert('在地址栏输入about:config,然后修改signed.applets.codebase_principal_support的键值,将值修改为true');
            return;
        }
        
        var fname = document.getElementById(filePathId).value;
        var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
        try {
            // Back slashes for windows
            file.initWithPath( fname.replace(/\//g, "\\\\") );
        }catch(e) {
            if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e;
            alert('无法加载文件');
            return;
        }
        path = file.path;
    }
    return path;
}
function inputDir(){
	var path = getFilePath('path');
    document.getElementById("toDir").value = path;
}
 
1
0
分享到:
评论
1 楼 dingherry 2012-05-28  
试了下直接.value是,只能得到文件名。
LZ 能获得绝对路径了

相关推荐

    IE文件选择框

    在IE中,通过JavaScript可以获取用户选择的文件信息,但出于安全考虑,浏览器不会提供文件的完整路径,只能获取文件名。例如,通过`event.target.files[0].name`可以获取选中文件的名称。如果需要将文件上传至服务器...

    js打开浏览器文件下载框

    本文将深入探讨如何使用JS来打开浏览器的文件下载框,让用户能够选择并下载服务器上的文件。首先,我们需要理解浏览器的安全策略,因为出于安全考虑,浏览器对直接访问本地文件系统有严格的限制。 一、浏览器的同源...

    jsp选择文件夹路径

    在`browseFolder.js`文件中定义一个名为`browseFolder`的函数,该函数用于打开文件夹选择对话框,并返回所选文件夹的路径。 ```javascript function browseFolder(path) { try { var message = "请选择文件夹...

    jquery获取file表单选择文件的路径、名字、大小、类型

    本文将详细介绍如何使用jQuery来获取HTML表单中选择文件的路径、文件名、文件大小以及文件类型。这些功能在用户上传文件前,对于前端开发者来说是非常重要的,因为它们可以用于检查用户所选择的文件是否符合特定的...

    js控制上传文件的大小

    在这个示例中,我们首先定义了一个`checkFileSize`函数,它接收一个`fileInput`参数,即文件选择框。通过`fileInput.files[0]`我们可以获取到用户选择的第一个文件对象。接着,我们设置了最大允许的文件大小(10MB)...

    JSP同时选择多文件上传MultifileUploadDemo

    4. 文件数据被保存到服务器的临时目录或指定的存储路径。 5. 服务器返回一个确认消息,告知客户端文件上传成功。 在实现过程中,我们需要注意以下几点: - **安全考虑**:确保文件上传过程的安全性,避免恶意文件...

    多表单文件上传到数据库

    每个表单可以有不同的输入字段,如文本输入、选择框、文件上传字段等。例如,`&lt;form&gt;`标签用于定义表单,`&lt;input type="file"&gt;`用于让用户选择要上传的文件。 2. **多部分表单数据(Multipart Form Data)**:由于...

    Springboot实现文件上传

    本篇文章将深入探讨如何使用Spring Boot实现文件上传功能,包括设置服务器端口、定义文件存储路径以及如何在前端展示所上传的图片。 首先,我们需要在Spring Boot项目中引入所需的依赖。对于文件上传,我们通常会...

    微信小程序 多文件传输 formData 插件

    `wx.chooseImage` 可以让用户从相册或相机中选择图片,返回的本地临时文件路径可以作为 `wx.uploadFile` 的参数。`wx.uploadFile` API 接受服务器的接口地址和本地文件路径,然后将文件上传至指定的服务器端点。 三...

    js+koa2 实现上传下载预览功能

    在本项目中,我们将探讨如何使用JavaScript(JS)与Koa2框架来构建一个支持文件上传、下载和预览功能的简易应用。这个项目特别适合初学者,因为它的实现过程清晰明了,易于理解。 首先,Koa2是Node.js平台上的一个...

    SpringMVC文件上传,多文件上传实例

    同时,我们需要配置最大上传文件大小以及临时文件存储路径。 4. **创建文件上传表单**: 在HTML页面中,创建一个包含`enctype="multipart/form-data"`属性的表单,然后添加一个或多个`&lt;input type="file"&gt;`字段,...

    上传文件代码源码 网页上传源码

    为了增强用户体验,可以使用JavaScript和CSS进行美化,如添加自定义按钮样式,并实时显示所选文件的信息,包括文件名、类型和大小。 2. **文件API** HTML5引入了File API,它提供了读取、操作和上传文件的能力。...

    ASP源码—简便无刷新 ASP 文件上传系统.zip

    同时,使用`&lt;input type="file"&gt;`创建一个文件选择框,用户可以通过这个控件选择要上传的文件。 2. **ASP处理表单数据**:当用户提交表单时,服务器端的ASP脚本会接收到文件数据。你可以通过`Request`对象的`Form`...

    asp.net mvc文件上传

    在视图中,创建一个input type="file"的表单字段,用户选择文件后提交表单。控制器中的Action接收这个表单,通过HttpPostedFileBase对象获取上传的文件。然后,可以调用SaveAs()方法将文件保存到服务器。 4. 使用...

    laravel-admin:form表单树状复选框组件(CheckboxTree).rar

    最后,为了使组件正常工作,你可能还需要在页面的 JavaScript 部分引入对应的库,例如 jQuery 和 Vue.js,并且编写一些 JavaScript 代码来处理点击事件,动态地更新表单的隐藏字段,以保存用户的选中状态。...

    .net文件上传控件

    1. **传统文件上传**:使用`&lt;input type="file"&gt;`标签创建一个文件选择框,然后通过表单提交来上传文件。在服务器端,可以使用`HttpPostedFileBase`类来访问上传的文件信息,例如文件名、大小、类型等,然后将其保存...

    轻松搞定Extjs 带目录

    - 提示框(message box) - 输入框(prompt box) - 确认框(confirm box) - 自定义消息框(自定义外观和行为) - 进度条对话框(用于长时间运行操作的反馈) #### 5. 页面与脚本分离 在Extjs中推荐使用`Ext....

    TP5 上传文件

    7. **文件信息获取**:`File` 对象提供了很多有用的方法,如 `getSize()`(获取文件大小)、`getExtension()`(获取文件扩展名)、`getMime()`(获取文件 MIME 类型)等,方便对上传的文件进行进一步处理。...

    多文件上传MultipartFile

    在多文件上传过程中,首先我们需要在前端创建一个表单,允许用户选择多个文件。表单的`enctype`属性必须设置为`multipart/form-data`,以支持文件上传。然后,后台接收这些文件时,Spring MVC会自动将上传的文件封装...

    ASP 上传 多选 框选 多文件

    ASP提供了`Server.MapPath`方法来获取相对于应用程序根目录的物理路径,可以结合`System.IO.File`类来创建新文件,并将上传的文件内容写入。 4. **安全性考虑**: - **文件名冲突**:上传的文件名可能会与服务器上...

Global site tag (gtag.js) - Google Analytics