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>
时间: 2024-10-11 18:04:51

js判断文件类型大小并给出提示的相关文章

js判断文件类型是否是指定格式

功能说明:js实现判断文件类型,图片‘视频等格式,当不符合格式时,会自动清除,并重新选择.’ 1..图片.视频等格式判断,直接上代码 <script type="text/javascript">//1.这个函数是,判断图片格式--------------------------------------------------------------------function checkImg(){var img_id=document.getElementById('m

JavaScript客户端判断文件类型及大小

<html><head><title>潜水式无堵塞排污泵</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"></head><body>以下是一个客户端控制file上传图片类型和大小的示例(注意:由于是客户端限制,所以用户可以绕过这个限制):<script language=&qu

js判断浏览器类型

js判断浏览器类型  <script type="text/javascript" >     <!--   function getOs()   {       var OsObject = "";      if(isIE = navigator.userAgent.indexOf("MSIE")!=-1) {           return "MSIE";      }      if(isFiref

JS判断浏览器类型方法

在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子.浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本. JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的.在许多情况下,值判断出浏览器类型之后,还需判

Linux中用st_mode判断文件类型

Linux中用st_mode判断文件类型 2012-12-11 12:41 14214人阅读 评论(4) 收藏 举报  分类: Linux(8)  C/C++(20)  版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux中,可以利用stat()函数来获取一个文件的状态 [cpp] view plain copy #include <sys/stat.h> #include <unistd.h> int stat(const char *file_name, stru

UNIX环境编程学习笔记(6)——文件I/O之判断文件类型

lienhua342014-09-01 1 文件类型 我们平时最常接触的文件类型有普通文件(regular file)和目录(di-rectory file),但是 UNIX 系统提供了多种文件类型: (1) 普通文件(regular file) 这种文件包含了某种形式的数据,这些数据无论是文件还是二进制对于 UNIX 内核而言都是一样的.对普通文件内容的解释有处理该文件的应用程序进行. (2) 目录文件(directory file) 目录文件包含了其他文件的名字以及指向与这些文件有关信息的指

JavaScript根据文件名判断文件类型

//JavaScript根据文件名判断文件类型 var imgExt = new Array(".png",".jpg",".jpeg",".bmp",".gif");//图片文件的后缀名 var docExt = new Array(".doc",".docx");//word文件的后缀名 var xlsExt = new Array(".xls"

通过JS判断联网类型和连接状态

通过JS判断联网类型和连接状态 中国的移动网络环境复杂,为了给用户带去更好访问体验,开发者希望能了解用户当前的联网方式,然后给用户一个符合当前网络环境的请求结果. W3C的规范中给出了一个方法来获得现在的网络状态navigator.connection:根据Working Draft 29 November 2012协议规范我们可以从接口中获得bandwidth(带宽,M/s)和metered两个参数的值:还提供了一个监听方法,来时刻监听接入环境的变化情况.现实中我们发现很多浏览器并没有返回ba

根据文件头数据判断文件类型

现有一文件,其扩展名未知或标记错误.假设它是一个正常的.非空的文件,且将扩展名更正后可以正常使用,那么,如何判断它是哪种类型的文件?在后缀未知,或者后缀被修改的文件,依然通过文件头来判断该文件究竟是什么文件类型.我们可以使用一个文本编辑工具如UltraEdit打开文件(16进制模式下),然后看文件头是什么字符,以下是常见文件类型的文件头字符(16进制),希望对你有帮助:JPEG (jpg),文件头:FFD8FF PNG (png),文件头:89504E47 GIF (gif),文件头:47494