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

JavaScript06

怎么用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>

 <input id="file_Up" name="file_Up" type="file" onchange="getFileSize(this.value)"/>

<input id="sub_Import" type="submit" value="导入" />

js中function getFileSize() {

    var btnsave = document.getElementById("sub_Import") 

    btnsave.disabled = true 

    var filepath = ""

    var fileupload = document.getElementById("file_Up")

    if (fileupload.value.length < 5) {

        alert('请选择文件!')

        return

    }

    var agent = window.navigator.userAgent

    if (agent.indexOf("Firefox") >= 1) {

        var maxsize = 4 * 1024 * 1024

        var size = fileupload.files[0].size

        if (size > parseInt(maxsize)) {

            alert("文件超过大小!")

            return false

        }

        else {

            btnsave.disabled = false

            return true

        }

    }

    else {

        fileupload.select()

        fileupload.blur()

        filepath = document.selection.createRange().text

        try {

            var fso, f, fname, fsize

            var flength = 4 * 1024 //设置上传的文件最大值(单位:kb),超过此值则不上传。 

            fso = new ActiveXObject("Scripting.FileSystemObject")

            f = fso.GetFile(filepath) //文件的物理路径

            fname = fso.GetFileName(filepath) //文件名(包括扩展名)

            fsize = f.Size //文件大小(bit)

            fsize = fsize / 1024

            //去掉注释,可以测试

            alert("文件路径:" + f)

            alert("文件名:" + fname)

            alert("文件大小:" + fsize + "kb")

            if (fsize > flength) {

                alert("上传的文件到小为:" + fsize + "kb,\n超过最大限度" + flength + "kb,不允许上传 ")

                return false

            }

            else {

                btnsave.disabled = false 

                return true

            }

        } catch (e) {

            alert(e + "\n 跳出此消息框,是由于你的activex控件没有设置好,\n" +

"你可以在浏览器菜单栏上依次选择\n" +

"工具->internet选项->\"安全\"选项卡->自定义级别,\n" +

"打开\"安全设置\"对话框,把\"对没有标记为安全的\n" +

"ActiveX控件进行初始化和脚本运行\",改为\"启动\"即可")

            return false

        }

    }

}

//fileupload对象是文本框类标签出现时候就会被创建出来

//获取上传文件的文件名其实就是获取文本框type为file中的value,虽然这个value一般来说是只读

//下面贴代码

<!DOCTYPE <html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

</head>

<body>

<span>文件名:</span><input type="file" />

<script type="text/javascript" src="

<script type="text/javascript">

!function($){

var reg = /^(\w)(:)(\\\w+)*\\(\w+.[a-zA-Z]+)*(\w+)*$/g

$('input').on('change', function(){

var name = $('input').val()

// name = name.match(reg)

name = name.replace(reg,"$4")

alert(name)

})

}(jQuery)

</script>

</body>

</html>

//测试结果