================================
©copyright 蕃薯耀 2020-01-10
一、官网地址：
https://github.com/blueimp/jquery-file-upload
二、使用文档（参数说明）
https://github.com/blueimp/jquery-file-upload/wiki/options
三、浏览器支持（官网说明）
四、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
如对本文有疑问， 点击进行留言回复！！
网友评论