zoukankan      html  css  js  c++  java
  • js判断文件类型大小并给出提示

    上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求:

          <form id="uploadForm" method="post" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required"
                            placeholder="请输入文件名" autocomplete="off" class="layui-input">
                    </div>
                </div>
    
                <div class="layui-form-item">
                    <label class="layui-form-label">资料类型:</label>
                    <div class="layui-input-block">
                        <select name="datatypeid"  id="datatypeid"></select>
                    </div>
                    <input type="hidden" id="yincang">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上传文件</label>
    
                    <div class="layui-input-block">
                        <input class="layui-input" type="file" name="file" onchange="fileChange(this);"/>
                    </div>
                </div>
    
                <div class="layui-form-item">
                    <div class="layui-input-block">
    
                        <input type="button" class="layui-btn" value="上传"
                            onclick="upload()" />
                    </div>
                </div>
            </form>

    js方法:

        <script type="text/javascript">
            var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
            function fileChange(target, id) {
                var fileSize = 0;
                var filetypes = [  ".doc", ".docx" ];//这里设置接受的文件类型
                var filepath = target.value;
                var filemaxsize = 1024 * 10;//接受的文件最大10M 
                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>
  • 相关阅读:
    序列化与反序列化
    SQL Server 中常见的十张系统表
    DataGridView的18中用法
    文件操作
    数据库的学习
    GUI图形图像编程主要技术的学习梳理
    软件研发过程中常用图形总结
    windows10 升级1803后,远程错误提示“出现身份验证错误,要求的函数不受支持 CredSSP 加密 Oracle修正”的解决办法
    SQLServer中按照任意分钟(5分钟、10分钟)分组统计数据
    支付宝APP支付,提示代码 ALIN10070
  • 原文地址:https://www.cnblogs.com/jiangwz/p/7978047.html
Copyright © 2011-2022 走看看