• 文件上传动态获取文件名


    <!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+" ";    // 换行
        };
        document.getElementById('filetext').innerHTML = str;
    }, false);
    </script>

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

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

    <textarea id="filetext"  name="fileName" th:text="${CloudPollingDto.fileName}"
                style="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=" 500px;" onchange="fileChange(this);"/>
    </body>
    </html>

  • 相关阅读:
    PHPUnit断言详情
    dev tools杂谈
    sublime text3 + python3.5 ide
    文件传输接收sz、rz命令用法
    Linux编辑器vi使用方法详细介绍
    vi编辑字符串替换及sed用法
    Selenium实战(一)——浏览器实例
    Python的数据库连接
    Cypress测试框架——一个简单的测试用例
    Cypress测试框架——入门1
  • 原文地址:https://www.cnblogs.com/Steven5007/p/7865874.html
Copyright © 2020-2023  润新知