blueImp/jQuery file upload 的正确用法(限制上传大小和文件类型)
这个插件太出名了,几乎能完成所有能想象的到的效果,包括进度条、拖拽、甚至现在已经完美支持图片视频等的处理,三个字形容就是屌爆了。最近在做上传这一部分,发现网上对于上传文件大小的限制和类型检测等的方法都不妥当,包括老外写的。blueimp提供了完整的解决方案,验证当然是有的,所以对于一个普通的上传组件来说需要下面三个组件:
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-process.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.12.5/js/jquery.fileupload-validate.js"></script>
大部分文章都没有包含process和validate这两个组件,前者负责处理上传过程中各个事件的管理,validate则是对验证的支持,如果不包含这两个组件,那么只能像下面这样来做一些验证:
add: function (e, data) {
var uploadErrors = []; var acceptFileTypes = /\/(pdf|xml)$/i;
if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
uploadErrors.push('Tipo de Archivo no Aceptado');
} console.log(data.originalFiles[0]['size']) ;
if (data.originalFiles[0]['size'] > 5000000) {
uploadErrors.push('Tamaño de Archivo demasiado Grande');
}
if(uploadErrors.length > 0) {
alert(uploadErrors.join("\n"));
} else {
data.context = $('<p/>').text('Subiendo...').appendTo(document.body);
data.submit();
} }
那么用官方的方式可以如下
<pre>acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 99 * 1024 * 1024,
minFileSize: 5,
maxNumberOfFiles: 50,
messages: {
maxFileSize: 'File exceeds maximum allowed size of 99MB',
acceptFileTypes: 'File type not allowed'
},processfail: function (e, data) {
var currentFile = data.files[data.index];
if (data.files.error && currentFile.error) {
// there was an error, do something about it
console.log(currentFile.error);
}
}</pre>
明显简洁很多。
blueImp/jQuery file upload 的正确用法(限制上传大小和文件类型)的更多相关文章
- drag file upload xhr 拖拽异步上传文件
<div id="droptarget" style="width: 500px; height: 200px; background: silver"& ...
- jQuery File Upload的使用
jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示等,以下就介绍一下该插件的简单使用 1.需要加载 ...
- jQuery File Upload文件上传插件简单使用
前言 开发过程中有时候需要用户在前段上传图片信息,我们通常可以使用form标签设置enctype=”multipart/form-data” 属性上传图片,当我们点击submit按钮的时候,图片信息就 ...
- jQuery File Upload blueimp with struts2 简单试用
Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题 虽然图片都可以上传 但是response报错 我下载的是8.8.7木有问题 但是8.8.7版本结合修改main. ...
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- jquery file upload 文件上传插件
1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...
- jQuery File Upload跨域上传
最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文 ...
- jQuery File Upload
jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...
随机推荐
- linux(ubuntu)安装时遇到的问题
window环境下安装linux虚拟机=时,由于在初始系统语言选择了中文,当linux虚拟机安装成功后, 按[Ctrl + alt +f1~f6]任一一键都行,进入到命令行模式,这时你会发现,哎,我的 ...
- Spring MVC 指导文档解读(一)
22.1 指导文档章节 In the Web MVC framework, each DispatcherServlet has its own WebApplicationContext, whic ...
- Hibernate映射之OneToOne(第二篇)
这是在项目中实际遇到的一个问题,纠结了很久.一开始参考mkyong的 ,两边都写OneToOne ,后来查看了一下项目经理在原来一些模块中的写法. 学习一下: 首先是E-R图: 一个货品可以进行多次 ...
- php socket获取数据类
<?php define("CONNECTED", true); define("DISCONNECTED", false); /** * Socket ...
- JS 将字符串转换成日期类型
将字符串形式的日期转换成日期对象 var strTime="2011-04-16"; //字符串日期格式 var date= new Date(Date.par ...
- 第八天:JS内置对象-Date日期对象
1.Data对象 日期对象用于处理日期和时间 2.获取当日日期 代码如下: <!DOCTYPE html> <html lang="en"><h ...
- 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImage ...
- 升级adt插件后,eclipse突然出现Unable to build: the file dx.jar was not loaded from the SDK folder 错误
旧版的SDK管理器里面最高只能安装Android 3.2 API,需要更新SDK管理器版本后才能安装Android 4.0.Android 4.1,方法如下: http://blog.csdn.net ...
- HTML5服务器端推送事件 解决PHP微信墙推送问题
问题描述 以前的文章中<PHP微信墙制作,开源>已经用PHP搭建了一个微信墙获取信息的服务器,然后我就在想推送技术应该怎么解决,上一篇已经用了.NET 的signalr做了一个微信墙,PH ...
- 移植到Windows CE 的经验
Windows CE 是微软早期推出的嵌入式设备和移动设备的开发运行平台,虽然目前移动端几乎都是android和ios的天下,但是,在嵌入式设备领域,Windows CE仍然占有一块地盘.很多用户希望 ...