写一个限制上传文件大小和格式的jQuery插件
在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题。本篇就来写一个"原生态"的jQuery插件,使之能限制上传文件的大小和格式。
首先,写一个名称为checkFileTypeAndSize.js的插件。通过判断当前文件的后缀名是否被包含在预先设置所允许的后缀名数组中,来限制文件格式;通过判断当前文件在IE以及其它浏览器下的尺寸是否大于预先设置所允许的最大文件尺寸,来限制文件大小;并提供格式错误、超过限制大小以及符合条件的回调函数。
(function ($) {$.fn.checkFileTypeAndSize = function (options) {//默认设置var defaults = {allowedExtensions: [],maxSize: 1024, //单位是KB,默认最大文件尺寸1MB=1024KBsuccess: 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; //bytesize = size / 1024;//kb//size = size / 1024;//mb} else {//其它浏览器size = $(this)[0].files[0].size;//bytesize = 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>}
写一个限制上传文件大小和格式的jQuery插件的更多相关文章
- python利用socket写一个文件上传
1.先将一张图片拖入‘文件上传’的目录下,利用socket把这张图片写到叫‘yuan’的文件中 2.代码: #模拟服务端 import subprocess import os import sock ...
- php 修改上传文件大小
有些朋友要通过自己的网站后台,包括论坛,来上传一些文件,php一般为2m,或8m(以下我们按默认为2m),接下来就是来讲怎么修改上传文件大小的. 1.首先修改执行上传文件限制 一般的文件上传,除非文件 ...
- nginx上传文件大小
采用nginx作反向代理,出现了一个诡异的问题,小文件可以提交,大文件会报500内部错误.这个是什么原因导致的呢? 查wiki可知,上传文件大小相关的有三个配置 client_body_buffer_ ...
- asp.net--解决上传文件大小限制
原文地址 第一种方法,主要适用于IIS6.0版本 一.修改配置Web.Config文件中的httpRuntime节点 对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大 ...
- 经典JS 判断上传文件大小和JS即时同步电脑时间
我也是新手,还是一个JS笨,有一些网站要实现的功能要自己写么? 答案是不会,去问同事大佬吧,闲简单.就在晚上看了一些其他大佬们写的JS效果, 代码很少.占用网站CPU也小的多.可以一用, 废话少扯.代 ...
- 解决ASP.NET上传文件大小限制------(转载人家的博客很好用,略作修改)
解决ASP.NET上传文件大小限制 (2012-06-26 15:18:01) 转载▼ 标签: it 第一种方法,主要适用于IIS6.0版本 一.修改配置Web.Config文件中的httpRun ...
- 解决phpmyadmin上传文件大小限制的配置方法
解决phpmyadmin上传文件大小限制的配置方法 phpmyadmin导入SQL文件时涉及到phpmyadmin上传文件大小限制问题,默认phpmyadmin上传文件大小为2M,如果想要phpmya ...
- 解决ASP.NET上传文件大小限制
第一种方法,主要适用于IIS6.0版本 一.修改配置Web.Config文件中的httpRuntime节点对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大小.一.修改 ...
- 兼容各浏览器的js判断上传文件大小
由于项目需要,在网上找了一个JS判断上传文件大小的程序,经测试兼容IE6-,Firefox10,Opera11.,safari5.,chrome17 <!DOCTYPE html> < ...
随机推荐
- SpringMVC_HelloWorld_01
通过配置文件的方式实现一个简单的HelloWorld. 源码 一.新建项目 1.新建动态web项目 2.命名工程springmvc-01 3.勾选"Generate web.xml depl ...
- 《Photoshop智能手机APP界面设计》学习笔记-转
第一章 APP用户界面基础 1.1 手机UI设计相关基本概念 1.1.1 什么是UI设计 UI(User's Interface)即用户界面,它不仅仅是美化界面,还需要研究用户,让界面变得更友好.简洁 ...
- 193 Valid Phone Numbers
Given a text file file.txt that contains list of phone numbers (one per line), write a one liner bas ...
- python的mock功能,感觉入门了~~~
主要实现语法有patch, patch.object, Mock(). 下面的测试太赤裸裸了,只是为了熟悉语法. import unittest from unittest.mock import p ...
- 使用CSS3改变文本选中的默认颜色
::selection { background:#d3d3d3; color:#555; } ::-moz-selection { background:#d3d3d3; color:#555; } ...
- gym 101986
A - Secret of Chocolate Poles 队友写的. 好像水水的. //#pragma GCC optimize(2) //#pragma GCC optimize(3) //#pr ...
- mysql过滤数据
1.大纲 WHERE - 学习如何使用WHERE子句根据指定的条件过滤行记录. AND运算符 - 介绍如何使用AND运算符以组合布尔表达式以形成用于过滤数据的复杂条件. OR运算符 - 介绍OR运算符 ...
- 018 jquery中的事件
一:事件 1.Dom的两种加载方式 2.程序 略 二:事件绑定 1.事件绑定介绍 2.程序一(使用click的原始方式) <!DOCTYPE html> <html> < ...
- Java string.valueof的用法以及与parseint的区别
一.由基本数据型态转换成String String 类别中已经提供了将基本数据型态转换成 String 的 static 方法 ,也就是 String.valueOf() 这个参数多载的方法 有以下几 ...
- 转载-解决ORACLE 在控制台进行exp,导出时,空表不能导出
一.问题原因: 11G中有个新特性,当表无数据时,不分配segment,以节省空间 1.insert一行,再rollback就产生segment了. 该方法是在在空表中插入数据,再删除,则产生segm ...