怎么用js来获取 file中的上传文件的文件名

JavaScript023

怎么用js来获取 file中的上传文件的文件名,第1张

在firefox上,input(type=file)默认获取到的value值就是文件名。

在IE上,input(type=file)默认获取到的value值是路径。

因此用js来获取fileupload中的上传文件的文件名需要多方面考虑。

示例代码:

<form action="" method="get" onSubmit="return false">

<input type="text" name="test" id="test">

<input type="file" name="testFile" onChange="if(this.value)insertTitle(this.value)">

<input type="submit" value="提交">

</form>

<script language="javascript">

function insertTitle(path){

var test1 = path.lastIndexOf("/") //对路径进行截取

var test2 = path.lastIndexOf("\\") //对路径进行截取

var test= Math.max(test1, test2)

if(test<0){

document.getElementById("test").value = path

}else{

document.getElementById("test").value = path.substring(test + 1)//赋值文件名

}

}

</script>

如果你直接使用 javascript 将阿里云的accessId、accessKey写在页面上是不安全的,你可以使用后台存储这些敏感的信息,官网有相关的SDK ,你可以选择你常用的。

我使用的Java

流程:首先先访问你的后台获取到相关的凭证,将凭证携带发送到你的OSS,如果你要调用回调函数,在你的后台需要开启回调函数功能,

在后台编写你的回调函数,将回调函数凭证信息返回给前端,前端使用回调函数凭证访问OSS,就可以获取到回调函数信息。

无法获取本地文件的绝对路径,这里涉及到一个浏览器安全问题。

<input type="file" onchang="javascript:changeFile()" />

// 选择文件

function changeFile () {

    var e = this

    // 修正IE8下,文件上传异常

    var files = e.files

    if (files == undefined) {

        return false

    }

    // 取得选择文件相关数据信息

    var file = files[0], fileName = file.name, fileSize = file.size

    // 获取文件后缀名

    var fileType = fileName.substr(fileName.lastIndexOf(".")).toLowerCase()

}