最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

jQuery插件限制上传文件大小与格式使用方法

来源:动视网 责编:小采 时间:2020-11-27 19:52:38
文档

jQuery插件限制上传文件大小与格式使用方法

jQuery插件限制上传文件大小与格式使用方法:这次给大家带来jQuery插件限制上传文件大小与格式使用方法,jQuery插件限制上传文件大小与格式的注意事项有哪些,下面就是实战案例,一起来看一下。在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看
推荐度:
导读jQuery插件限制上传文件大小与格式使用方法:这次给大家带来jQuery插件限制上传文件大小与格式使用方法,jQuery插件限制上传文件大小与格式的注意事项有哪些,下面就是实战案例,一起来看一下。在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看


这次给大家带来jQuery插件限制上传文件大小与格式使用方法,jQuery插件限制上传文件大小与格式的注意事项有哪些,下面就是实战案例,一起来看一下。

在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题。本篇就来写一个"原生态"的jQuery插件,使之能限制上传文件的大小和格式。

首先,写一个名称为checkFileTypeAndSize.js的插件。通过判断当前文件的后缀名是否被包含在预先设置所允许的后缀名数组中,来限制文件格式;通过判断当前文件在IE以及其它浏览器下的尺寸是否大于预先设置所允许的最大文件尺寸,来限制文件大小;并提供格式错误、超过限制大小以及符合条件的回调函数。

(function ($) {
 $.fn.checkFileTypeAndSize = function (options) {
 //默认设置
 var defaults = {
 allowedExtensions: [],
 maxSize: 1024, //单位是KB,默认最大文件尺寸1MB=1024KB
 success: function () { },
 extensionerror: function () { },
 sizeerror: function () { }
 };
 //合并设置
 options = $.extend(defaults, options);
 //遍历元素
 return this.each(function () {
 $(this).on('change', function () {
 //获取文件路径
 var filePath = $(this).val();
 //小写字母的文件路径
 var fileLowerPath = filePath.toLowerCase();
 //获取文件的后缀名
 var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') + 1);
 //判断后缀名是否包含在预先设置的、所允许的后缀名数组中
 if ($.inArray(extension, options.allowedExtensions) == -1) {
 options.extensionerror();
 $(this).focus();
 } else {
 try {
 var size = 0;
 if ($.browser.msie) {//ie旧版浏览器
 var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
 var fileObj = fileMgr.getFile(filePath);
 size = fileObj.size; //byte
 size = size / 1024;//kb
 //size = size / 1024;//mb
 } else {//其它浏览器
 size = $(this)[0].files[0].size;//byte
 size = size / 1024;//kb
 //size = size / 1024;//mb
 }
 if (size > options.maxSize) {
 options.sizeerror();
 } else {
 options.success();
 }
 } catch (e) {
 alert("错误:" + e);
 }
 }
 });
 });
 };
})(jQuery);

在客户端的调用变得非常简单。

<input type="file" name="f" id="f"/>
@section scripts
{
 <script src="~/Scripts/checkFileTypeAndSize.js"></script>
 <script type="text/
javascript
">
 $(function() {
 $('#f').checkFileTypeAndSize({
 allowedExtensions: ['jpg'],
 maxSize: 10,
 success: function() {
 alert('ok');
 },
 extensionerror: function() {
 alert('允许的格式为:jpg');
 return;
 },
 sizeerror: function() {
 alert('最大尺寸10kb');
 return;
 }
 });
 });
 </script>
}

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

jQuery让浏览器相互跳转传递参数使用详解

jquery插件uploadify使用详解

文档

jQuery插件限制上传文件大小与格式使用方法

jQuery插件限制上传文件大小与格式使用方法:这次给大家带来jQuery插件限制上传文件大小与格式使用方法,jQuery插件限制上传文件大小与格式的注意事项有哪些,下面就是实战案例,一起来看一下。在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看
推荐度:
标签: 上传 用法 插件
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top