一、背景

维护项目时，希望限制上传的文件类型为 *.xls 或 *.xlsx 。

二、问题解决

EasyUI 的 filebox为了实现以上效果，分两步执行。直接上已经弄好的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set><%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%><!DOCTYPE html>
<head>
<meta charset="UTF-8">
<jsp:include page="../inc.jsp"></jsp:include>
<title>小白学习</title>
</head>
<body style="height: 100%;"><div class="Store-M-main"><div class="blank20"></div><br><form id="formFile" method="post" action="##"class="report_form" target="_blank"><div class="easyui-panel" title="Upload File"style="width: 450px; padding: 30px 70px 50px 70px"><div style="margin-bottom: 20px"><div>物料文件：</div><input class="easyui-filebox" id="fb" name="fb" type="text" style="width: 300px; height: 32px;"></div><div><a href="javascript:void(0)" class="easyui-linkbutton" style="width: 98%" onclick="submitForm()">提交</a></div></div></form></div>
</body>
<script type="text/javascript">$(function () {//添加对话框，上传控件初始化$('#fb').filebox({buttonText: '选择文件',  //按钮文本buttonAlign: 'right',   //按钮对齐//multiple: true,       //是否多文件方式accept: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', //指定文件类型onChange: function (e) {change(this);//上传处理}});});function change(_obj){var tempFile = $("#fb");var value=tempFile.filebox('getValue');// 取后缀名var ext=value.substring(value.lastIndexOf(".")+1).toLowerCase();if((ext!='xls') && (ext!='xlsx')){$.messager.alert("消息提示", "文件格式需为*.xls或*.xlsx 类型", "error");$('#fb').filebox('setValue','');return;}}function submitForm(){}</script>

代码解析：

第一步：

在选择文件时，自动将文件限制为 *.xls 或 *.xlsx 的类型可见。效果：

实现：设置 accept 属性

（1）在 HTML 中设置

<input class="easyui-filebox" id="fb" name="fb" type="text" style="width: 300px; height: 32px;"
data-options="accept:'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'">

（2）在 JS 中设置

<script type="text/javascript">$(function () {//添加对话框，上传控件初始化$('#fb').filebox({buttonText: '选择文件',  //按钮文本buttonAlign: 'right',   //按钮对齐//multiple: true,       //是否多文件方式accept: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', //指定文件类型onChange: function (e) {change(this);//上传处理}});});
</script>

第二步：

变更上传文件后，进行判断，如果不是 *.xls 或 *.xlsx 的类型，则提示错误，并清空 filebox 。

<script type="text/javascript">$(function () {//添加对话框，上传控件初始化$('#fb').filebox({buttonText: '选择文件',  //按钮文本buttonAlign: 'right',   //按钮对齐//multiple: true,       //是否多文件方式accept: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', //指定文件类型onChange: function (e) {change(this);//上传处理}});});function change(_obj){var tempFile = $("#fb");var value=tempFile.filebox('getValue');// 取后缀名var ext=value.substring(value.lastIndexOf(".")+1).toLowerCase();if((ext!='xls') && (ext!='xlsx')){$.messager.alert("消息提示", "文件格式需为*.xls或*.xlsx 类型", "error");$('#fb').filebox('setValue','');// 清空fileboxreturn;}}</script>

三、笔记扩展

EasyUI 中 filebox 的 accept 属性值汇总

类型	accept 值	描述
*.3gpp	audio/3gpp, video/3gpp	3GPP Audio/Video
*.ac3	audio/ac3	AC3 Audio
*.asf	allpication/vnd.ms-asf	Advanced Streaming Format
*.au	audio/basic	AU Audio
*.css	text/css	Cascading Style Sheets
*.csv	text/csv	Comma Separated Values
*.doc	application/msword	MS Word Document
*.dot	application/msword	MS Word Template
*.dtd	application/xml-dtd	Document Type Definition
*.dwg	image/vnd.dwg	AutoCAD Drawing Database
*.dxf	image/vnd.dxf	AutoCAD Drawing Interchange Format
*.gif	image/gif	Graphic Interchange Format
*.htm	text/html	HyperText Markup Language
*.html	text/html	HyperText Markup Language
*.jp2	image/jp2	JPEG-2000
*.jpe	image/jpeg	JPEG
*.jpeg	image/jpeg	JPEG
*.jpg	image/jpeg	JPEG
*.js	text/javascript, application/javascript	JavaScript
*.json	application/json	JavaScript Object Notation
*.mp2	audio/mpeg, video/mpeg	MPEG Audio/Video Stream, Layer II
*.mp3	audio/mpeg	MPEG Audio Stream, Layer III
*.mp4	audio/mp4, video/mp4	MPEG-4 Audio/Video
*.mpeg	video/mpeg	MPEG Video Stream, Layer II
*.mpg	video/mpeg	MPEG Video Stream, Layer II
*.mpp	application/vnd.ms-project	MS Project Project
*.ogg	application/ogg, audio/ogg	Ogg Vorbis
*.pdf	application/pdf	Portable Document Format
*.png	image/png	Portable Network Graphics
*.pot	application/vnd.ms-powerpoint	MS PowerPoint Template
*.pps	application/vnd.ms-powerpoint	MS PowerPoint Slideshow
*.ppt	application/vnd.ms-powerpoint	MS PowerPoint Presentation
*.rtf	application/rtf, text/rtf	Rich Text Format
*.svf	image/vnd.svf	Simple Vector Format
*.tif	image/tiff	Tagged Image Format File
*.tiff	image/tiff	Tagged Image Format File
*.txt	text/plain	Plain Text
*.wdb	application/vnd.ms-works	MS Works Database
*.wps	application/vnd.ms-works	Works Text Document
*.xhtml	application/xhtml+xml	Extensible HyperText Markup Language
*.xlc	application/vnd.ms-excel	MS Excel Chart
*.xlm	application/vnd.ms-excel	MS Excel Macro
*.xls	application/vnd.ms-excel	MS Excel Spreadsheet
*.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	MS Excel Office 2007+ XML
*.xlt	application/vnd.ms-excel	MS Excel Template
*.xlw	application/vnd.ms-excel	MS Excel Workspace
*.xml	text/xml, application/xml	Extensible Markup Language
*.zip	aplication/zip	Compressed Archive

限制多种文件类型，用英文逗号将其隔开即可。如：

accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png",

其实，我有一种更加简单的方法，就是accept=".xls,.xlsx"，这样的设置已经能满足我最初的需求了，至于为什么没看到有人这么用，我就不是很明白，欢迎大神评论啦。

EasyUI filebox 限制文件上传的类型相关推荐

js判断文件上传的类型
js判断文件上传的类型 /*** @param: fileName - 文件名称* @param: 数据返回 1) 无后缀匹配 - false* @param: 数据返回 2) 匹配图片 - imag ...
Vue.js 文件上传限制类型上传与限制选择的文件类型
只能限制某种文件上传,如果新选择其他文件便提示文件错误,清空文件列表 :accept="'.pdf'" ---> 选择上传文件的时候自动匹配pdf的文件类型 :file-li ...
个人使用向1:文件上传的类型限制思考
数据通过输入输出来进行交互,对应数据最后保存到数据库中.那么对应文件,excel跟图片就没办法都放在数据库.当然图片可以通过BASE64也能进数据库,只是没有那么适用性. 目前文件上传一般是分二种, ...
php 文件上传mime 类型,php文件上传类型（MIME）对照表
网上有很多php文件上传的类,文件上传处理是php的一个特色(至少手册上是将此作为php特点来展示的,个人认为php在数组方面的优异功能更有特色),学php的人都知道文件上传怎么做,但很多人在编程中却 ...
php 文件上传mime 类型,PHP JAVA C上传文件如何准确判断文件类型－mime知识普及
MIME的英文全称是"Multipurpose Internet Mail Extensions" 多功能Internet 邮件扩充服务,它是一种多用途网际邮件扩充协议,在1992 ...
文件上传限制类型参考
文件类型限制参考在上传文件过程中,设计需求上这边总是需要对上传文件进行限制和判断,避免用户的盲操作,导致上传文件类型不对后,无法得到正确的信息,造成不好的体验影响,所以在页面上我们需要对文件类型做判 ...
input文件上传限制(类型，大小)
1.限制上传文件类型解决办法是可以给它添加一个accept属性,比如: <input id="File1" type="file" accept=&quo ...
php 文件上传mime 类型,php 上传的MIME类型
一下是文件后缀与MIME类型的对照表 123 application/vnd.lotus-1-2-3 3gp video/3gpp A开头: aab application/x-authowar ...
html文件上传限制类型,html input file accept 上传文件类型限制格式 MIME 类型列表
单点登录改进版-使用ajax分发cookie避免重定向轮询前言继上一篇博文:可跨域的单点登录(SSO)实现方案[附.net代码]虽然实现了单点登录,也存在很多不合理的地方.很多热心的朋友也给出了很 ...
jsp文件通常用common_29.jsp-动态生活之用Commons-FileUpload组件控制文件上传
sizeMax):设置请求信息实体内容的最大允许的字节数 ★ public List parseRequest(HttpServletRequest req): 解析form表单中的每个字符的数据,返 ...

EasyUI filebox 限制文件上传的类型

一、背景

二、问题解决

代码解析：

三、笔记扩展

EasyUI filebox 限制文件上传的类型相关推荐

最新文章

热门文章