这是我自己封装的插件
$.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 imgArr = fileUrls.split(" ");
var urlCount = imgArr.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="' + imgArr[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)
urlCount--
});
var limit=function () {
if(option.maxCount - urlCount>0){
return option.maxCount - urlCount
}
else
return 0
}
$(this).filer({
extensions: option.fileTypes,
limit:limit(),
fileMaxSize: option.fileSize,
maxSize: option.fileSize * (option.maxCount - urlCount),
// 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;
success(imgUrl)
}
else {
common.alert(data.Message);
}
}
},
onFileCheck:function () {
urlCount=$(".jFiler-item").length
return true
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null,
dragContainer: null
},
addMore: false,
allowDuplicates: true,
onRemove: function(itemEl){
var imgUrl=$(itemEl).closest(".jFiler-item").find("img").attr("src");
deleteFiles(imgUrl)
urlCount=$(".jFiler-item").length
},
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: function () {
if("{{fi-limit}}">0){
return "{{fi-name}} 文件太大! 请选取小于 {{fi-fileMaxSize}} MB的文件"
}
else
{
return "现在文件数量已大于限制("+option.maxCount+"),不能继续上传,可进行删除操作"
}
},
filesSizeAll: "您所选取的文件太大! 请选取 小于{{fi-maxSize}} MB.的文件"
}
}
});
}
回调参数
var option={
maxCount:2
}
var fileUrls = $("#Images").val().trim();
$("#fileQueue").uploadFiles($("#imgContainer"),fileUrls,success(),deleteFiles(),option)
});
function deleteFiles() {
return function (imgUrl) {
var itemSelect =$(".imgShow[src='"+imgUrl+"']").closest(".jFiler-item")
var fileUrls = $("#Images").val();
fileUrls = fileUrls.replace(imgUrl, "").replace(" ", " ").trim();
$("#Images").val(fileUrls);
itemSelect.fadeOut();
itemSelect.remove()
}
}
function success() {
return function (imgUrl) {
$(".jFiler .jFiler-item-thumb").append("<p class='jFiler-item-thumb-image'> <img class='imgShow' src='" + imgUrl + "'> </p>");
var images = $("#Images").val();
$("#Images").val(images + " " + imgUrl);
}
}
html
<input type="file" name="files[]" id="fileQueue" multiple="multiple" style="width: 30%">
<p id="imgContainer"></p>
封装中最开始是已上传的图片的展示,把隐藏域中传进去的url取出来也就是fileUrls当做参数传进去用来生成已上传的图片的展示
这样取的图片限定数量,可是现在这种情况下 删除已经上传的图片计算出的能上传的图片数量并不会变 因为插件初始一次 这样我限定两张删除一张可插件仍认为我有两张提示不能上传 如何解决
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...