JavaScript如何弹出文件选择框,然后返回文件完整路径

JavaScript016

JavaScript如何弹出文件选择框,然后返回文件完整路径,第1张

1、js弹出文件选择框:

给按钮定义以下javascript函数:

var inputObj=document.createElement('input')

         inputObj.setAttribute('id','_ef')

         inputObj.setAttribute('type','file')

         inputObj.setAttribute("style",'visibility:hidden')

         document.body.appendChild(inputObj)

         inputObj.click()

         inputObj.value 

单击已经添加函数的按钮会弹出选择本地文件的对话框。

2、写一个隐藏域, 当用户选择文件之后把图片的路径赋给这个隐藏域, 然后在action中就可以获取到文件的路径了,代码如下:

function showRealPath(filePath){

      document.getElementsByName("textfield")[0].value = filePath

}

<input type="file" name="uploadfile" onfocus="showRealPath(this.value)"/>

<input type="hidden" name="uploadfileRealPath">

面一段代码是基于js实现的点击某个图标或按钮弹出文件选择框的核心代码,代码比较简单,需要的朋友参考下

具体代码如下所示:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<HTML>

<head>

<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>

<script type=‘text/javascript‘>

function selectFile(){

//触发 文件选择的click事件

$("#file").trigger("click")

//其他code如 alert($("#file").attr("value"))

}

/* 获取 文件的路径 ,用于测试*/

function getFilePath(){

alert($("#file").attr("value"))

}

</script>

</head>

<body>

<!-- 给这个input 设置样式隐藏,切忌不可用display控制隐藏,可能不能跨浏览器 -->

<input type="file" id="file" onchange="getFilePath()"

style="filter:alpha(opacity=0)opacity:0width: 0height: 0"/>

<button onclick="selectFile()">select file</button>

<button onclick="getFilePath()">get FilePath</button>

</body>

</html>

选择后缀就需要去写个函数方法了!

<input type="file" name="pic" accept="image/gif" multiple/>

加一个multiple关键字就能选择多个文件