jQuery-File-Upload 使用，jQuery-File-Upload上传插件
================================
©Copyright 蕃薯耀 2018年9月26日
http://fanshuyao.iteye.com/
一、官网地址：
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 蕃薯耀 2018年9月26日
http://fanshuyao.iteye.com/
相关推荐
《jQuery-File-Upload插件深度解析与应用实践》 jQuery-File-Upload是一款功能强大的JavaScript文件上传组件，它提供了一种优雅的方式来处理文件上传，支持多文件选择、进度条显示、图片预览等特性，使得文件上传变...
在上传过程中，会触发一系列的事件，如fileuploadstart、fileuploadprogress、fileuploadsuccess等，开发者可以绑定这些事件来执行相应的逻辑。 三、集成与配置 要将jQuery-File-Upload引入项目，首先需要在HTML中...
《jQuery-file-upload：实现跨语言的拖拽上传文件功能》 在现代Web开发中，用户交互体验至关重要，其中文件上传是常见的功能之一。jQuery-file-upload是一个强大的jQuery插件，它支持多语言、拖拽上传等多种特性，...
jQuery-File-Upload则是流行的文件上传插件，它支持多文件选择、进度条显示、预览、删除等功能，且兼容各种浏览器。 这篇名为“AngularJS封装jQuery-File-Upload”的博文主要探讨了如何将jQuery-File-Upload的功能...
《jQuery-File-Upload-9.12.1：便捷高效文件上传插件解析》 在Web开发领域，用户交互的丰富性和效率是提升用户体验的关键因素之一，而文件上传功能正是其中不可或缺的一部分。jQuery-File-Upload是一款广受欢迎的...
jQuery-File-Upload是一款广泛使用的前端文件上传插件，它提供了优雅的用户体验和强大的功能。结合ASP.NET MVC框架，可以构建出高效、稳定且用户体验优秀的文件上传系统。本文将深入探讨如何在ASP.NET MVC项目中集成...
jQuery File Upload是一款强大的基于jQuery的文件上传插件，它提供了多文件选择、进度条显示、预览、上传取消以及删除等功能。这款插件利用HTML5技术，为现代浏览器提供了先进的文件上传体验，同时通过优雅降级的...
jQuery-File-Upload-9.11.2(完整版，插件已下载),官方的很多引用文件都是线上的，加载很慢，下载到本地后更靠谱，这个版本是已经整理好的，直接调用后台php的部分也在其中，可以直接应用到项目中，直接拷贝过去就...
在本文中，我们将深入探讨如何使用jQuery-File-Upload插件在ASP.NET MVC框架下实现Excel文件的上传功能。这个过程涉及到前端HTML交互、JavaScript处理以及C#后端的控制器和模型验证。以下是对整个流程的详细解释： ...
在当今的Web开发中，用户界面往往需要处理文件上传功能，这使得jQuery File Upload插件成为一个重要的工具。本篇文章将深入探讨如何利用jQuery File Upload库，结合Java后端，实现高效、友好的文件上传功能。 ...
**jQuery-File-Upload** 是一个广泛使用的前端文件上传插件，它提供了丰富的功能和优秀的用户体验。这个插件是基于JavaScript库jQuery构建的，旨在简化文件上传操作，尤其是在需要批量上传、进度显示以及跨域上传的...
在Web开发中，文件上传功能是一项常见的需求，而jQuery File Upload则是实现这一功能的一款强大插件。本篇文章将深入探讨jQuery File Upload的核心特性、工作原理以及如何在实际项目中进行应用。 jQuery File ...
《jQuery File Upload 9.9.2：一款强大的文件上传插件》 在现代Web开发中，文件上传功能是不可或缺的一部分。jQuery File Upload 9.9.2是一款优秀的JavaScript插件，它为开发者提供了高效、易用且功能丰富的文件...
支持上传多个文档Ajax 开发实例， Chrome上传多个没问题，但IE上传会出现错误 序列化类型为“System.Collections.Generic.LinkedListNode`1[[ViewDataUploadFilesResult, App_Web_5x24fddx, Version=0.0.0.0, ...
jQuery File Upload允许开发者高度自定义，例如通过模板系统定制上传界面，通过设置选项改变默认行为，甚至可以扩展插件以实现更多功能，如文件的压缩、水印添加等。 五、安全考虑 在使用jQuery File Upload时，...
在Web开发中，文件上传功能是不可或缺的一部分，jQuery File Upload 是一个强大且用户友好的文件上传插件，它支持多文件选择、进度条显示、预览功能以及异步上传。这个名为 "jQuery-File-Upload-Java-master.zip_...
"jQuery-File-Upload" 是一个著名的前端文件上传插件，尤其在Web开发领域中广泛应用。这个插件基于JavaScript库jQuery，提供了强大的功能，如多文件选择、文件预览、进度条显示、取消上传以及大文件分块上传等。在这...