javascript打开文件对话框选择打开文件后,如何一步到位的把文件路径名显示在文本框中

<script language="JavaScript">
function Fuc_select(){
var s= document.getElementById("file");
s.click();

var filepath = document.getElementById("Txt_filepath");
filepath.value=s.value;
}
</script>

该函数的目的是:执行时,打开一个文件选择对话框,用户选择文件后,将文件路径名赋值给id号是“Txt_filepath”的文本框。
但是,实际执行时,在用户尚未选择文件时,javascript立即执行了赋值语句,导致用户选择文件后,文本框内容仍为空。
请教大师,如何在此函数中实现,等待用户选择文件后,再执行赋值。
<input type="text" style="width:500px" id="Txt_filepath" >
<input type="button" style="width:50px;;margin:0 0 0 7px" value="选择" onClick="Fuc_select()">

首先创建一个input标签,定义type为“file”(*关键)

<button id="id">Open</button>
<input id="yourinputname" type="file" name="yourinputname" style="display: none;" />

然后用 jQuery 代码来触发它就可以了:

$('#id').on('click', function() {
   $('#yourinputname').trigger('click');
});

样例参考: http://jsfiddle.net/QVAC7/

温馨提示:内容为网友见解,仅供参考
第1个回答  2014-07-12
选择文件的对话框是不需要你用事件打开的,那个事件是内置的,除非你重写了一个类似的按钮!追问

就是一个文本框,一个按钮,点击按钮,打开一个“文件对话框”,选择一个文件后,希望把文件路径显示到文本框中,请赐教啊!

追答

获取文件路径利用表单的形式就可以.

 HttpPostedFile file = Request.Files["file"];
 string fileName = file.FileName;

这是C#代码,后台获取的方式.

直接通过js获取的话,不同浏览器还有兼容性问题。

可以参考一下附件。(由于超过最大字数了)

本回答被提问者采纳

js中用链接实现打开本地文件对话框
选中文件后,所选文件路径会出现在上传附件后面的文本框中。方法二:在定义的form中添加以下javascript代码:{ columnWidth :1, layout :'form', bodyStyle :'padding:10px', defaultType :'textfield', labelWidth :120, width :1000, buttonAlign :'center', items : [...

...出现选择文件对话框,选择文件后,将文件名及路径在textbox中显示...
void CTestDlg::OnButtonBorrows() { CString filter; filter = "*.*"; CFileDialog dlg(TRUE, NULL, NULL, OFN_HIDEREADONLY, filter); \/\/打开对话框 if(dlg.DoModal()==IDOK) { CString str = dlg.GetPathName(); \/\/ 获取文件路径 CEdit *p_Edit = (CEdit*)GetDlg...

vb+access。如何实现图片,word文档的上传与存储。
5 点击上传可以打开文件选择对话框,选择文件后文件路径名显示在txt控件中。点击保存后文档可以存储到access数据库中。... 点击上传可以打开文件选择对话框,选择文件后文件路径名显示在txt控件中。点击保存后文档可以存储到access数据库中。 展开  我来答 分享 微信扫一扫 新浪微博 QQ空间 举报 浏览381 次 ...

如何使用 OpenFileDialog 组件
运行实例程序,单击“选择文件”按钮将弹出您熟悉的Windows“打开”对话框,选择文件后,文件名显示在窗体的文本框中。

易语言里怎么点击浏览按钮就可以选择文件,之后在按运行就可以运行所选...
先创建两个按钮组件,一个通用对话框,一个编辑框!代码如下:.版本 2 .程序集 窗口程序集1 .子程序 __启动窗口_创建完毕 通用对话框1.过滤器 = “可执行文件(.exe)|*.exe|所有文件|*.*”.子程序 _选择文件按钮_被单击 通用对话框1.打开 ()编辑框1.内容 = 通用对话框1.文件名 .子...

win10系统怎么用记事本打开文件win10系统用记事本打开文件方法详解搜 ...
1. **直接右键点击文件**:找到你想要用记事本打开的文件,右键点击它,在弹出的菜单中选择“打开方式”(Open with),然后在子菜单中找到并选择“记事本”(Notepad)。如果记事本不在列表中,点击“选择其他应用”(Choose another app),然后找到并勾选“记事本”,勾选“始终使用此应用打开.xxx...

哪找电脑的操作技巧?
很简单,将桌面上的IE浏览器的图标拖动放在任务栏的快速启动上,然后右击IE图标,选择属性,在打开的属性对话框的“目标”地址后面加上一个空格,然后输入“-nohome”,保存设置。这样当我们通过该快捷方式启动IE时,就不会直接访问拼音加加指定的网站上了。Win98的序列号丢失不用愁你是否遇到这样的情况:安装Windows 98...

统信桌面专业版【vim编辑器】使用介绍?
「末行模式」:可以通过命令操作文件,比如搜索、保存、退出等。Vim编辑器是系统自带的,无需安装;右键点击桌面空白处-选择打开命令终端即可使用vim编辑器 vim编辑器打开方式 vim编辑器打开方式一             vim 文件路径      ...

打开CSV格式文件的步骤详解学会使用CSV文件操作打开CSV文件轻松无忧
选择CSV文件 在文件选择器中,选中所需的CSV文件,然后点击“打开”按钮。注意确保选择的文件是CSV格式的,而不是其他格式。确认文件路径 确认所选文件的路径是否正确显示在操作界面上的路径栏或其他相应位置。确保路径正确无误,避免后续操作中出现错误。设置CSV文件参数 根据需要,设置CSV文件的参数。这些...

androidstudio点击按钮跳转到文件夹,并选择图片
2、然后在新的activity的布局文件中添加一个按钮或者其他可点击的元素,用于启动文件选择对话框。3、接下来在这个新的activity的Java文件中编写代码,处理文件选择对话框的结果。需要使用Intent来打开文件选择对话框,并在用户选择文件后获取文件路径。4、最后在主activity中设置点击按钮后跳转到新创建的activity...

相似回答