input type='file'限制上传文件类型

  前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get;然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛,就是几行 js 代码就能搞定的事。是的,简单的文件上传是可以直接使用FormData()对象将文件上传;如果问题只是这么简单就好了,可能大家也都遇到过上传文件类型的限制,不知道大家有没有注意到这么简单的方法将文件类型过滤,下面直接贴代码:

 1、 js实现:js实现上传文件类型的限制是将允许上传的文件的后缀名全部列出,以数组的形式存储,然后通过数组的indexof方法即可,以图片为例代码如下

    var  fileType = [‘jpg‘ ,‘png‘ , ‘jpeg‘ , ‘gif‘ , ‘bmp‘]

    var file  = e.target.files[0]

    if(fileType.indexof(file) < 0) {

      alert(‘不支持这种类型的文件’)

    }

关于数组的indexof()方法怎么用,可以看我的这篇博文:http://www.cnblogs.com/novice007/p/7077914.html

 2、 css实现:不知道大家有没有注意到一个细节,那就是我选择了文件之后,如果不是我规定的类型页面就会弹框告诉我不支持这个格式的文件,那么问题就来了,既然不支持这种格式的文件,那我可不可以在点开文件进行选择的时候,不是我要的格式的文件就不显示,那我就不能选择,同时页面也不会这么讨厌的让我去重新选择它要的格式,能做到吗?答案是能,而且不需要任何代码,简简单单的在html页面就能实现:代码如下:

  <input   type ="file"  accept="image/jpg, image/png, image/jpeg, image/gif">

  在input文件框中,添加accept特性,特性中限制文件类型,那么在点开输入框进入本地磁盘选择文件时,不是accept特性指定的文件类型那么你在打开的本地磁盘文件中就看不到这些文件。

这是最近做项目时遇到的一个很好解决文件类型限制问题的方法,所以写出这篇博文跟大家分享,如有不足之处,欢迎与我交流:qq: 1540302851

input type='file'限制上传文件类型

时间: 2024-10-26 17:09:07

input type='file'限制上传文件类型的相关文章

input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。

不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可.event.target.value='';

input type file onchange上传文件的过程中,同一个文件二次上传无效的问题。

不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可.event.target.value=''; 转自https://www.cnblogs.com/imsomnus/p/62

&lt;input type=&quot;file&quot;&gt;图片上传时,先预览

<label> <input type="file" id="upload"> </label> js $("#upload").on('change',function(){ var file = this.files[0]; console.log(this.files); var reader = new FileReader(); //读取文件过程方法 reader.onloadstart = func

input file限制上传文件类型

http://www.cnblogs.com/haocool/p/3431181.html http://www.haorooms.com/post/input_file_leixing http://www.jb51.net/article/43498.htm

&lt;input type = file/&gt;上传图片限制大小、类型判断、像素判断

<input type = file/>上传图片限制大小.类型判断.像素判断 在项目中经常用到input标签来上传文件,而这些文件通常是图片文件.图片有很多格式我们只需要其中的几种,就需要对用户上传的文件进行验证,在HTML5中有一个新的属性:accept文件类型限制.但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制.类型判断.像素判断 <!DOCTYPE html> <html> <head> <meta charse

php 下 html5 XHR2 + FormData + File API 上传文件

FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>

安装wps导致 application/kset 上传文件类型报错解决办法

电脑中安装wps上传execl时,上传.xls文件时 报错 application/kset 文件类型不正确 打印array() print_r($_FILES ) 结果如下: Array ( [userfile] => Array ( [name] => Template.xls[type] => application/kset[tmp_name] => C:\\Windows\\temp\\phpACC.tmp [error] => 0 [size] => 768

Struts2 使用拦截器限制上传文件类型

<action name="upload" class="fileUploadAction" method="upload"> <interceptor-ref name="defaultStack"> <param name="fileUpload.allowedTypes">image/png</param> </interceptor-ref>

struts2 File标签上传文件

1.action.class private File pictureType; private String pictureTypeContentType; private String pictureTypeFileName; public String editType() throws IOException{ Type t=typeService.find(Type.class, id); System.out.println("id="+id); System.out.pr