/*
* jQuery File Upload
*
* 资料
* https://github.com/blueimp/jQuery-File-Upload
*
* 参考教程
* http://www.jq22.com/jquery-info230
*/
需要加载的js文件有:
jquey-1.8.3.min.js //建议使用jQuery 1.8以上版本
jquery-ui-widget.js //jQuery UI Widget
jquery.iframe-transport.js //扩展 iframe 数据传输
jquery.fileupload.js //jQuery File Upload核心类
jquery.xdr-transport.js //在IE下应载入此文件解决跨域问题
↓ 此时只需要加载一个上传按钮
<input id=”fileupload” type=”file” name=”file[]” multiple />
*multiple 上传前可选中多个图片
var uploadMaxsize = “<?php echo $uploadConfig[‘maxsize’]; ?>”;
var uploadAlowexts = <?php echo is_array($uploadConfig[‘alowexts’]) ? ‘”‘.implode(‘,’, $uploadConfig[‘alowexts’]).'”‘ : ”; ?>;
示例：
// 图片上传
$(“#fileupload”).fileupload({
// 请求url
url: ‘upload/upload’,
// 请求方式 ，可以选择POST，PUT或者PATCH,默认POST
formData:{ model:””, module:2, form_submit:”ok”},
// 服务器返回的数据类型
dataType:’json’,
// 添加文件后触发 *此处还未上传
add: function(e,data) {
/**
* 上传前判断
*
* 图片数量限制
*/
var $image_list = $(“.picture-image-list”);
var size = $image_list.find(‘img’).size();
if (size > 5) {
console.log(‘最多可上传’+ 5 +’张图片，单张照片不超过4M。’);
return false;
}
$.each(data.files, function(index, file) {
if (file.size>=uploadMaxsize) {
console.log(‘文件大小超出限制’);
return false;
}
var isExt = false; //后缀名是否符合要求
var filename = file.name;
var fileext = filename.substr(filename.lastIndexOf(“.”)+1);
$.each(uploadAlowexts.split(‘,’), function(i, v){
if (v == fileext) {
isExt = true;
return false;
}
});
/*{
lastModified: 1646104636209,
lastModifiedDate: Tue Mar 01 2022 11:17:16 GMT+0800 (中国标准时间) {}
name: “Assets(20220301111639).xlsx”,
size: 5901,//单位字节
type: “application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”,
webkitRelativePath: “”,
}*/
});
if (!isExt) {
console.log(‘文件后缀只能为’+uploadAlowexts);
return false;
}
data.submit(); //启动文件上载
},
//当一个单独的文件处理队列结束（完成或失败时）触发
progressalways: function (e, data) {
},
//全局上传处理事件的回调函数,即上传过程时触发
progressall: function (e, data) {
//进度条可以用 data.loaded 与d ata.total 的比进行完成
$(‘#progress .bar’).css(‘width’, parseInt(data.loaded / data.total * 100, 10) + ‘%’);
},
// 上传请求成功时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数也会被触发
done: function (e, data) {
var data = data.result;
var result = data.datas;
if(data.code == 200) {
updateSortable()
} else {
$image_box.remove();
alert(data.datas||’上传失败~’);
}
},
// 上传请求失败时触发的回调函数，如果服务器返回一个带有error属性的json响应这个函数将不会被触发
fail: function (e, data) {
$.each(data.messages, function (index, error) {
$(‘<p style=”color: red;”>Upload file error: ‘ + error + ‘<i class=”elusive-remove” style=”padding-left:10px;”/></p>’)
.appendTo(‘#div_files’);
});
}
})
// 其他参数 —————–
//autoUpload:是否自动上传，即当文件放入file之后便自动上传，默认为true
autoUpload: false,
//acceptFileTypes：允许上传的的文件类型
acceptFileTypes: /(\.|\/)xlsx$/i,
//maxFileSize: 最大上传文件大小
maxFileSize: 1,
//minFileSize:最小上传文件大小,单位B
minFileSize: 1,