EasyUI filebox 限制文件上传的类型 |
您所在的位置：网站首页 › 上传文件类型限制 › EasyUI filebox 限制文件上传的类型 |
EasyUI filebox 限制文件上传的类型
|
一、背景
维护项目时，希望限制上传的文件类型为 *.xls 或 *.xlsx 。 二、问题解决EasyUI 的 filebox为了实现以上效果，分两步执行。直接上已经弄好的代码： 小白学习 物料文件： 提交 $(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(){ } 代码解析：第一步： 在选择文件时，自动将文件限制为 *.xls 或 *.xlsx 的类型可见。效果：
实现：设置 accept 属性 （1）在 HTML 中设置 （2）在 JS 中设置 $(function () { //添加对话框，上传控件初始化 $('#fb').filebox({ buttonText: '选择文件', //按钮文本 buttonAlign: 'right', //按钮对齐 //multiple: true, //是否多文件方式 accept: 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', //指定文件类型 onChange: function (e) { change(this);//上传处理 } }); });第二步： 变更上传文件后，进行判断，如果不是 *.xls 或 *.xlsx 的类型，则提示错误，并清空 filebox 。 $(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; } } 三、笔记扩展EasyUI 中 filebox 的 accept 属性值汇总 类型accept 值描述*.3gppaudio/3gpp, video/3gpp3GPP Audio/Video*.ac3audio/ac3AC3 Audio*.asfallpication/vnd.ms-asfAdvanced Streaming Format*.auaudio/basicAU Audio*.csstext/cssCascading Style Sheets*.csvtext/csvComma Separated Values*.docapplication/mswordMS Word Document*.dotapplication/mswordMS Word Template*.dtdapplication/xml-dtdDocument Type Definition*.dwgimage/vnd.dwgAutoCAD Drawing Database*.dxfimage/vnd.dxfAutoCAD Drawing Interchange Format*.gifimage/gifGraphic Interchange Format*.htmtext/htmlHyperText Markup Language*.htmltext/htmlHyperText Markup Language*.jp2image/jp2JPEG-2000*.jpeimage/jpegJPEG*.jpegimage/jpegJPEG*.jpgimage/jpegJPEG*.jstext/javascript, application/javascriptJavaScript*.jsonapplication/jsonJavaScript Object Notation*.mp2audio/mpeg, video/mpegMPEG Audio/Video Stream, Layer II*.mp3audio/mpegMPEG Audio Stream, Layer III*.mp4audio/mp4, video/mp4MPEG-4 Audio/Video*.mpegvideo/mpegMPEG Video Stream, Layer II*.mpgvideo/mpegMPEG Video Stream, Layer II*.mppapplication/vnd.ms-projectMS Project Project*.oggapplication/ogg, audio/oggOgg Vorbis*.pdfapplication/pdfPortable Document Format*.pngimage/pngPortable Network Graphics*.potapplication/vnd.ms-powerpointMS PowerPoint Template*.ppsapplication/vnd.ms-powerpointMS PowerPoint Slideshow*.pptapplication/vnd.ms-powerpointMS PowerPoint Presentation*.rtfapplication/rtf, text/rtfRich Text Format*.svfimage/vnd.svfSimple Vector Format*.tifimage/tiffTagged Image Format File*.tiffimage/tiffTagged Image Format File*.txttext/plainPlain Text*.wdbapplication/vnd.ms-worksMS Works Database*.wpsapplication/vnd.ms-worksWorks Text Document*.xhtmlapplication/xhtml+xmlExtensible HyperText Markup Language*.xlcapplication/vnd.ms-excelMS Excel Chart*.xlmapplication/vnd.ms-excelMS Excel Macro*.xlsapplication/vnd.ms-excelMS Excel Spreadsheet*.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheetMS Excel Office 2007+ XML*.xltapplication/vnd.ms-excelMS Excel Template*.xlwapplication/vnd.ms-excelMS Excel Workspace*.xmltext/xml, application/xmlExtensible Markup Language*.zipaplication/zipCompressed Archive限制多种文件类型，用英文逗号将其隔开即可。 如： accept: "image/gif,image/bmp,image/jpeg,image/jpg,image/png",其实，我有一种更加简单的方法，就是accept=".xls,.xlsx"，这样的设置已经能满足我最初的需求了，至于为什么没看到有人这么用，我就不是很明白，欢迎大神评论啦。
|
【本文地址】
今日新闻 |
推荐新闻 |