var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = docement.getElementById('test-image-preview')
//监听change事件
fileInput.addEventListener('change', function() {
//清除背景图片
preview.style.backgroundImage = ''
//检查文件是否选择
if(!fileInput.value) {
info.innerHTML = '没有选择文件'
return
}
//获取file文件引用：
var file = fileInput.files[0]
//获取文件信息
info.innerHTML = '文件：' + file.name + '<br>' +
'大小：' + file.size + '<br>' +
'修改：' + file.lastModifiedDate
if(file.type !== 'image/jpeg' &&file.type !== 'image/png' &&file.type !== 'image/gif') {
alert('不是有效的图片文件')
return
}
//读取文件
var reader = new FileReader()
reader.onload = function(e) {
var data = e.target.result
preview.style.backgroundImage = 'url('+ data + ')'
}
//以DataURL的形式读取文件：
reader.readerAsDataURL(file)
})
<form onsubmit="return fileCountCheck(this)">
<input type="file" name="mulUp[]" multiple="multiple" required="required" />
<input type="submit" />
</form>
<script type="text/javascript">
function fileCountCheck(objForm){
if (window.File && window.FileList) {
var fileCount = objForm["mulUp[]"].files.length
if(fileCount > 10){
window.alert('文件数不能超过10个，你选择了' + fileCount + '个')
}
else {
window.alert('符合规定')
}
}
else {
window.alert('抱歉，你的浏览器不支持FileAPI，请升级浏览器！')
}
return false
}
</script>
扩展资料：java获取路径，文件名的方法总结
1、文件路径获取
Thread.currentThread().getContextClassLoader().getResource(“”) //获得资源文件(.class文件)所在路径
ClassLoader.getSystemResource(“”)
ClassName.class.getClassLoader().getResource(“”)
ClassName.class .getResource(“/”)
ClassName.class .getResource(“”) // 获得当前类所在路径
System.getProperty(“user.dir”) // 获得项目根目录的绝对路径
System.getProperty(“java.class.path”) //得到类路径和包路径
其中ClassName为类名。
2、文件名获取
String fName =” D:\java\workspace\netmanager01\resources\mibfiles\wtView.mib “
(“\”，java中需要转义)
第一种：
File tempFile =new File( fName .trim())
String fileName = tempFile.getName()
第二种：
fName = fName.trim()
fileName = fName.substring(fName.lastIndexOf("/")+1)
或者
fileName = fName.substring(fName.lastIndexOf("\\")+1)
第三种：
fName = fName.trim()
String temp[] = fName.split("\\\\")//split里面必须是正则表达式，"\\"的作用是对字符串转义，其中split("\\\\")的作用是：按照"\\"为分隔符，将路径截取，并存入数组，如下：temp[]=[,D:,java,workspace,netmanager01,resources,mibfiles,wtView.mib]
fileName = temp[temp.length-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>
