EasyUI filebox 限制文件上传的类型

最新推荐文章于 2024-04-30 17:35:01 发布

Alone_in_

最新推荐文章于 2024-04-30 17:35:01 发布

阅读量5.4k

点赞数

分类专栏：随笔文章标签： easyui

本文链接：https://blog.csdn.net/Alone_in_/article/details/104894035

版权

随笔专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、背景

维护项目时，希望限制上传的文件类型为 *.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','');// 清空filebox
		    return;
		}
	}
	
</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"，这样的设置已经能满足我最初的需求了，至于为什么没看到有人这么用，我就不是很明白，欢迎大神评论啦。

Alone_in_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUI filebox 限制文件上传的类型

一、背景维护项目时，希望限制上传的文件类型为 *.xls 或 *.xlsx 。二、问题解决为了实现以上效果，分两步执行。直接上已经弄好的代码：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri=...
复制链接

扫一扫

专栏目录