Steven5007

导航

文件上传动态获取文件名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="file" multiple="multiple" id="test">
    <ul id='filetext'></ul>
</body>
<script>
var test = document.getElementById('test');
test.addEventListener('change', function() {
    var t_files = this.files;
    console.log(t_files);
    var str = '';
  for (var i = 0, len = t_files.length; i < len; i++) {
        console.log(t_files[i]);
        str += '<li>名称:' + t_files[i].name + ',大小:' + t_files[i].size / 1024 + 'KB</li>';
        //str +=t_files[i].name+"\r\n";    // 换行
    };
    document.getElementById('filetext').innerHTML = str;
}, false);
</script>

</html>
------------------------------------------------------------------------------------------------------------------------------

#1.文件名动态显示在textarea中

<textarea id="filetext"  name="fileName" th:text="${CloudPollingDto.fileName}"
            style="width:175px;height:100px;"></textarea>

------------------------------------------------------------------------------------------------------------------------------

#2 <textarea name="fileName" id="ar1" cols="20" rows="3">textarea的value值是在这里的</textarea> 
<script language="javascript">
document.getElementById("ar1").value="这样就可以了";
</script>

------------------------------------------------------------------------------------------------------------------------------

#3.限制上传文件大小

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
function fileChange(target,id) {
var fileSize = 0;
var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"];
var filepath = target.value;
var filemaxsize = 1024*2;//2M
if(filepath){
var isnext = false;
var fileend = filepath.substring(filepath.indexOf("."));
if(filetypes && filetypes.length>0){
for(var i =0; i<filetypes.length;i++){
if(filetypes[i]==fileend){
isnext = true;
break;
    }
  }
}
if(!isnext){
alert("不接受此文件类型!");
target.value ="";
return false;
  }
}else{
return false;
  }
if (isIE && !target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
if(!fileSystem.FileExists(filePath)){
alert("附件不存在,请重新输入!");
return false;
  }
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
  } else {
fileSize = target.files[0].size;
  }

var size = fileSize / 1024;
if(size>filemaxsize){
alert("附件大小不能大于"+filemaxsize/1024+"M!");
target.value ="";
return false;
}
if(size<=0){
alert("附件大小不能为0M!");
target.value ="";
return false;
  }
}
</script>
</head>
<body>
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/>
</body>
</html>

 

posted on 2017-11-20 13:36  Steven5007  阅读(280)  评论(0编辑  收藏  举报