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>
  • 相关阅读:
    web自动化--如何在不同页面间游刃有余
    web自动化-窗口句柄及位置变化
    [bug] 验证selenium的显式和隐式等待而发现的一个低级错误
    Web自动化
    Appium 实战练习一
    Appium1.9 之 Chromedriver安装方式
    Appium1.9.1 之 Desired Capabilities 释疑
    [BUG]Appium1.9.1 这个问题竟然花了我5分钟进行定位
    Appium1.9.1 部署及结果检验
    selenium 初探
  • 原文地址:https://www.cnblogs.com/jiangwz/p/7978047.html
Copyright © 2011-2022 走看看