jQuery-File-Upload 使用，jQuery-File-Upload上传插件
================================
©Copyright 蕃薯耀 2020-01-10
https://www.cnblogs.com/fanshuyao/
一、官网地址：
https://github.com/blueimp/jQuery-File-Upload
二、使用文档（参数说明）
https://github.com/blueimp/jQuery-File-Upload/wiki/Options
三、浏览器支持（官网说明）
- Google Chrome
- Apple Safari 4.0+
- Mozilla Firefox 3.0+
- Opera 11.0+
- Microsoft Internet Explorer 6.0+
四、jQuery-File-Upload 入门使用
1、最简单的使用方法：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
</body>
</html>
如果不使用iframe，jquery.iframe-transport.js文件可以不引用。
2、自定义使用
不显示文件选择框，只显示上传按钮
<a id="btnUploadMdbFile" href="javascript:;" class="plui-linkbutton" >上传mdb文件</a> <div style="display: none;">
<input id="inputUploadMdbFile" type="file" name="mdbFiles" />
</div>
控件初始化：
$(function(){
$("#btnUploadMdbFile").click(function(){
$("#inputUploadMdbFile").click();
});
//multiple 多选
//input限制文件上传可以使用（IE9+）： accept="application/msaccess" accept="image/*"
$("#inputUploadMdbFile").fileupload({
url : "${pageContext.request.contextPath}/xxx/fileUploadAction.go?method=fileUpload",
dataType: "json",
//autoUpload: false,
formData: {
"dirPath" : "temp_dir/mdb/"
},
add: function(e, data){
//var acceptFileTypes = /^(gif|jpe?g|png)$/i;
var acceptFileTypes = /^mdb$/i;
var files = data.originalFiles;
if(files && files.length > 0){
var isPass = true;
for(var i=0; i<files.length; i++){
var name = files[i]["name"];
var lastIndex = name.lastIndexOf(".");
if(lastIndex < 0){
isPass = false;
break;
}else{
var fileType = name.substring(lastIndex + 1);
if(!acceptFileTypes.test(fileType)){
isPass = false;
break;
}
}
}
if(!isPass){
top.$.messager.alert("系统提示","只能上传*.mdb文件","info");
return;
}
data.submit();
}
},
done: function(e, data){
//alert($.toJSON(data.result));
if(data.result && data.result.files && data.result.files.length > 0){
var file = data.result.files[0];
if(file.suffix == ".mdb"){
dealMdbFile(file.absolutePath);
}else{
top.$.messager.alert("系统提示","只能上传*.mdb文件","info");
}
}
}
});
});
formData：可以传递自己的参数。
add: function(e, data){}：增加控制文件的类型限制，这个可以省略。
done: function(e, data){}：上传成功后结果返回处理。
更多参数设置见：
https://github.com/blueimp/jQuery-File-Upload/wiki/Options
（如果你觉得文章对你有帮助，欢迎捐赠，^_^，谢谢！）
================================
©Copyright 蕃薯耀 2020-01-10
https://www.cnblogs.com/fanshuyao/
jQuery-File-Upload 使用，jQuery-File-Upload上传插件的更多相关文章
- Bootstrap文件上传插件File Input的使用
基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- JQuery文件上传插件JQuery.upload.js的用法简介
JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒.注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需 ...
- 可拖拽和带预览图的jQuery文件上传插件ssi-uploader
插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...
- Jquery自定义图片上传插件
1 概述 编写后台网站程序大多数用到文件上传,可是传统的文件上传控件不是外观不够优雅,就是性能不太好看,翻阅众多文件上传控件的文章,发现可以这样去定义一个文件上传控件,实现的文件上传的效果图如下: 2 ...
- 关于Plupload结合上传插件jquery.plupload.queue的使用
之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...
- jQuery上传插件Uploadify使用帮助
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP, ...
- JQuery上传插件uploadify优化
旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
- 基于jQuery很牛X的批量上传插件
上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件! 下面三款插件的 ...
- jsp+servlet+jquery 用jquery uploadify最新版本实现多文件上传
//这是script代码 <link rel="stylesheet" type="text/css" href="uploadify/uplo ...
随机推荐
- Spring Bean自动装配有哪些方式？
Spring 容器能够自动装配 Bean .也就是说,可以通过检查 BeanFactory 的内容让 Spring 自动解析 Bean 的协作者. 自动装配的不同模式: no - 这是默认设置,表示没 ...
- JAVA中级开发应该掌握的小知识点
一.悲观锁.乐观锁的区别: 悲观锁:一段执行逻辑加上悲观锁,不同线程同时执行,只有一个线程可以执行,其他线程在入口处等待,直到锁被释放.乐观锁:一段执行逻辑加上乐观锁,不同线程同时执行,可以同时进入执 ...
- ubuntu--- tracker/libdeepsort.so 找不到cv报错
一.刚开始解决尝试:因为“删掉lib下的libdeepsort.so报错”,原先以为是 libdeepsort.so 需要拷贝到 /lib路径下的问题,可是因为后来的工程有的好使,又的不好使了.''' ...
- Next.js 配置接口跨域代理转发
使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能. 先安装好 express 和 http-proxy-middlewa ...
- 在C＃中使用RESTful API的几种好方法
什么是Restful API REST 即Representational State Transfer的缩写.直接翻译的意思是"表现层状态转化". 它是一种互联网应用程序的API ...
- JavaScript-跨浏览器事件处理程序（EventUtil）
事件操作对象: var EventUtil= { //添加事件 addHandler: function (element, type, handler) { if (element.addEvent ...
- Excel时间格合并（年月日+时间点）
=value(a1)+b2 日期 时间 合并 2018/8/8 14:13 2018/8/8 14:13:00
- VS常用快捷键（最全）
智能提示:ctrl + J方法参数提示:ctrl + shift +空格智能标记(如:提示using.实现接口.抽象类等):ctrl + . 执行测试:ctrl + R,T(当前上下文),ctrl + ...
- js - 除法
取整数 1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.round(7/2 ...
- 1级搭建类113-Oracle 11gR2 SI FS（OEL 6.10）
Oracle 11g 单实例文件系统搭建(EMDC) EMDC:Database Control 单实例主机.数据库等监控,这东西12c之后没有了 EMGC:Grid Control 单独安装GC软件 ...