input file 上传文件类型、大小检查

作为上传文件的基本元素, input file 被广为应用。而对文件类型、大小的限制是常见的要求。可以通过如下办法,在前端进行原生的文件检查:

html 代码:

注意 accept 属性的用法

<input type="file" name="icon" onchange="checkFile(this)" accept="image/jpeg,image/x-png,image/gif" />

JS代码:

var checkFile = function(o) {
    if (o.files.length <= 0) return;    //点击取消时,直接退出
    var f = o.files[0];
    
    //检查类型、大小等信息,出错则退出,文件不会上传
    if (f.type != ‘image/jpeg‘ || f.size > 100*1024) {
        o.value = ‘‘;                   //保证重复选择某个文件时触发 onchange 事件
        alert(‘错误提示‘);
        return;
    }
    //下面是上传代码
    //为了安全,服务器端一般也要有检查机制,那就不是本文要讨论的了
}
时间: 2024-10-01 03:53:39

input file 上传文件类型、大小检查的相关文章

在HTML5的 input:file 上传文件类型控制 遇到的问题

1.input:file 属性的介绍  先瞅代码吧 <form> <input type="file" name="pic" accept="image/gif,image.jpg" multiple="multiple"/> </form> accept: 一般是指 上传文件的MIME类型. 文件类型MIME 列表  链接(我个人觉得比较全的地方) multipe: 是指多文件上传 2.工

input:file上传文件类型(记录)

imput 属性有以下几种: 1.type:input类型这就不多说了2.accept:表示可以选择的文件类型,多个类型用英文逗号分开,常用的类型见下表. <input id="file" type="file" accept="image/png,image/gif" name="file" /> 1 3.multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径. <input

mvc4 使用input:file上传文件

@using (Html.BeginForm("AddNews", "NewsMgr", FormMethod.Post, new { enctype = "multipart/form-data" })) 前台页面上使用form提交,但是HtmlAttribute必须有这个属性 enctype = "multipart/form-data" 否则上传时提交到后台的Request.Files一直为空,count是0. 后台页面

使用js清空input file上传文件的内容

html页面代码如下: <input id="file_input" type="file" onchange="upLoadFile(this)" value="" />js的代码如下,可以直接将上传文件input按钮的内容直接清空: var obj=document.getElementById('file_input');obj.outerHTML=obj.outerHTML; ---------------

ajax+ashx 完美实现input file上传文件

1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效果图: Chrome效果图:   2.input file上传按钮美化 css: .file{ position: relative; background-color: #b32b1b; border: 1px solid #ddd; width: 68px; height: 25px; display:

angular input file 上传文件

<body > <div ng-controller="fileCtrl"> <form ng-submit="submit(obj)"> <input type="file" ng-file-model="obj.testFile" /> <input type="submit" value="submit" /> </

input type=file 上传文件,同一个文件第二次上传无反应

用input file上传文件,掉用onchange方法时,多次上传同一个文件时功能失效,不会发送ajax请求 input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可.event.target.value=“”: 设为空之后在次点击就可实现同一文件多次上传操作 原文地址:https://www

input file 文件上传,js控制上传文件的大小和格式

文件上传一般是用jquery的uploadify,比较好用.后面会出文章介绍uploadify这个插件. 但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input file 可以控制上传的格式,但是是html5,很多浏览器不支持,请看我的文章对input file上传类型的控制. 下面我用javascript来控制文件上传的大小和类型. 贴出html代码: <form action="后端接口" enctype="multipart/for

input type=&#39;file&#39; 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.value == '') { alert("让选择要上传的图片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:) var isE