EasyUI filebox 限制文件上传的类型
生活随笔
收集整理的這篇文章主要介紹了
EasyUI filebox 限制文件上传的类型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、背景
? ? 維護項目時，希望限制上傳的文件類型為 *.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 |
| 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 限制文件上传的类型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PHP打造的轻量级单文件管理系统File
- 下一篇： IMDB Top 250电影推荐