封装的如下
$.fn.uploadFiles=function (container,fileUrls,success,deleteFiles, option) {
if(typeof option === 'undefined')
{
option = {};
}
option = {
fileTypes:option.fileTypes || ['jpeg', 'png', 'jpg', 'gif'],
maxCount: option.maxCount || 5,
fileSize: option.fileSize || 10
};
if(fileUrls!="") {
var urlCount = fileUrls.length;
if(option.maxCount-urlCount>0){}
$(container).empty();
container.append('<p class="jFiler-items jFiler-row"><ul class="jFiler-items-list jFiler-items-grid" style="clear: both;text-align: left;"></ul></p>')
for (var i = 0; i < urlCount; i++) {
container.find(".jFiler-items-list").append(' <li class="jFiler-item">\
<p class="jFiler-item-container">\
<p class="jFiler-item-inner">\
<p class="jFiler-item-thumb">\
<p class="jFiler-item-status"></p>\
<p class="jFiler-item-thumb-image">\
<img class="imgShow" src="' + fileUrls[i] + '">\
</p>\
</p>\
<p class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</p>\
</p>\
</p>\
</li>')
}
}
container.find(".jFiler-item-trash-action").click(function () {
var imgUrl=$(this).parents(".jFiler-item").find(".imgShow").attr("src");
deleteFiles(imgUrl);
var itemSelect =$(".imgShow[src='"+imgUrl+"']").closest(".jFiler-item");
itemSelect.fadeOut();
itemSelect.remove();
});
$(this).filer({
extensions: option.fileTypes,
limit:option.maxCount,
fileMaxSize: option.fileSize,
// changeInput: '<p class="jFiler-input-dragDrop" style="float: left;width:30%;padding: 10px 0px;background: none;border-radius: 4px"><p class="jFiler-input-inner"><p class="jFiler-input-text"><h3>将文件拖放至此</h3> <span style="display:inline-block; margin: 4px 0">or</span></p><a class="jFiler-input-choose-btn btn-de' +
// '">浏览文件</a></p></p>',
showThumbs: true,
// theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid" style="clear: both;text-align: left;"></ul>',
item: '<li class="jFiler-item" style="display: inline-block;margin-left: 1%">\
<p class="jFiler-item-container">\
<p class="jFiler-item-inner">\
<p class="jFiler-item-thumb">\
<p class="jFiler-item-status"></p>\
<p class="jFiler-item-thumb-overlay">\
<p class="jFiler-item-info">\
<p style="display:table-cell;vertical-align: middle;">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</p>\
</p>\
</p>\
</p>\
<p class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</p>\
</p>\
</p>\
</li>',
itemAppend: '<li class="jFiler-item">\
<p class="jFiler-item-container">\
<p class="jFiler-item-inner">\
<p class="jFiler-item-thumb">\
<p class="jFiler-item-status"></p>\
<p class="jFiler-item-thumb-overlay">\
<p class="jFiler-item-info">\
<p style="display:table-cell;vertical-align: middle;">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</p>\
</p>\
</p>\
</p>\
<p class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</p>\
</p>\
</p>\
</li>',
progressBar: '<p class="bar"></p>',
itemAppendToEnd: false,
canvasImage: true,
removeConfirmation: true,
_selectors: {
list: '.jFiler-items-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action'
}
},
uploadFile: {
url:"/res/image/Upload?_ajaxcalltype=1",
data: null,
type: 'POST',
enctype: 'multipart/form-data',
synchron: true,
beforeSend: function () { },
success: function (data) {
data = JSON.parse(data);
if (data.Success) {
var imgUrl = data.Data.Url;
$(".jFiler .jFiler-item-thumb").append("<p class='jFiler-item-thumb-image'> <img class='imgShow' src='" + imgUrl + "'> </p>");
success(imgUrl)
}
else {
common.alert(data.Message);
}
}
},
onFileCheck:function () {
console.log($(this).find(".jFiler").find(".jFiler-item").length)
var filesCount=$(".jFiler-item",container).length+$(this).find(".jFiler").find(".jFiler-item").length;
if(filesCount>=option.maxCount){
alert("现文件数量已大于等于限制("+option.maxCount+"),不能继续上传,可进行删除操作");
return false
}
return true
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null,
dragContainer: null
},
addMore: false,
allowDuplicates: false,
onRemove: function(itemEl){
// var imgUrl=$(itemEl).closest(".jFiler-item").find("img").attr("src");
// deleteFiles(imgUrl)
},
dialogs: {
alert: function (text) {
return alert(text);
},
confirm: function (text, callback) {
confirm(text) ? callback() : null;
}
},
captions: {
removeConfirmation: "确定要移除文件么?",
errors: {
filesLimit: "现文件数量已大于等于限制("+option.maxCount+"),不能继续上传,可进行删除操作",
filesType: "文件格式出错,只支持"+option.fileTypes+"上传",
filesSize:"您所选取的文件太大! 请选取 小于{{fi-maxSize}} MB.的文件",
filesSizeAll: "您所选取的文件太大! 请选取 小于{{fi-maxSize}} MB.的文件"
}
}
});
}
在外面这么调用
$("#fileQueue").uploadFiles($("#imgContainer"),fileUrls,success(),deleteFiles())
那么

这个this则指向fileQueue 怎么能让filer中各回调的this也指向filQueue
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
具体参考
call()的用法