申明:这里只写出js代码,最终效果需css配合,不是本文讨论的重点,所以此处不贴出。
1.封装的js代码
$.fn.uploadityPackage = function (options) { // default configuration properties var defaults = { imgContainerId: "imgContainer", closeClass: "show_close", hfImgId: "hfImg", imgList: [], uploadLimit: 5, prevCountId: "prevCount", nextCountId: "nextCount", fileUploadType: "", auto: true, multi: true, queueSizeLimit: 1, fileSizeLimit: "5MB", buttonText: "选择图片", disable: false }; var options = $.extend(defaults, options); var $uploadify_dml = $(this); var imgContainerId = options.imgContainerId, closeClass = options.closeClass, hfImgId = options.hfImgId, imgList = options.imgList, uploadLimit = options.uploadLimit, uploadLimitDynamic = uploadLimit, prevCountId = options.prevCountId, nextCountId = options.nextCountId, fileUploadType = options.fileUploadType, auto = options.auto, multi = options.multi, queueSizeLimit = options.queueSizeLimit, fileSizeLimit = options.fileSizeLimit, buttonText = options.buttonText, disable = options.disable; //清空容器,并加入图片 function setImage(imgContainerId, imgList) { $("#" + imgContainerId).empty(); var l = imgList.length; if (l == 0) { return; } for (var i = 0; i < l; i++) { appendImg(imgContainerId, imgList[i]); } } //初始化 if (imgList.length > 0) { setImage(imgContainerId, imgList); var l = imgList.length; countUploadNum(uploadLimit, l, prevCountId, nextCountId); uploadLimit = uploadLimit - l;//剩余可以上传的图片数量 } //插入图片位置 function appendImg(imgContainerId, url) { $("#" + imgContainerId).append('<div class="show_box"><img src="' + url + '"><span class="show_close"></span></div>'); } //计算可以上传的图片数量 function countUploadNum(total, curNum, prevId, nextId) { $("#" + prevCountId).html(curNum); $("#" + nextCountId).html(total - curNum); } //删除数组中的数据 function deleteArrayByParams(imgList, url) { for (var i = 0, l = imgList.length; i < l; i++) { if (imgList[i] == url || imgList[i] == "http://" + location.host + url) { imgList.splice(i, 1); break; } } } //删除图片 $("#" + imgContainerId + " ." + closeClass).live('click', function () { if (confirm("确定删除该项目图片吗?")) { var me = $(this), url = me.siblings('img').attr('src'), id = me.parent().parent().attr('id'); me.parent().hide(); deleteArrayByParams(imgList, url); if (imgList.length > 0) { $("#" + hfImgId).val(imgList.join(",")); } else { $("#" + hfImgId).val(''); } if (imgList.length < uploadLimit) { $uploadify_dml.uploadify('disable', false); //为避免达到上传数量,再删除图片后,上传无限制的BUG,添加uploadLimitDynamic,用于uploadify中的uploadLimit1不再此处增加数量 uploadLimitDynamic += 1; $uploadify_dml.uploadify('settings', 'uploadLimit', uploadLimitDynamic); } } }); //uploadfify的调用方法 $uploadify_dml.uploadify({ 'swf': '/JS/uploadify_v3.1/uploadify.swf', 'fileObjName': 'Filedata', 'uploader': '/Api/swfUpload.ashx', 'buttonText': buttonText, 'removeCompleted': true, 'queueID': 'fileQueue1', 'formData': { 'TYPE': fileUploadType }, 'auto': auto, 'multi': multi, 'queueSizeLimit': queueSizeLimit, 'uploadLimit': uploadLimit, 'fileTypeExts': '*.jpg;*.jpeg;*.png;*.gif;', 'fileTypeDesc': '请选择jpg,jpeg,png,gif,格式图片', 'fileSizeLimit': fileSizeLimit, 'onUploadSuccess': function (file, data, response) { if (response) { var jsonData = $.parseJSON(data); if (jsonData.errorCode == 1) { var url = jsonData.msg; imgList.push("http://" + location.host + url); var l = imgList.length; countUploadNum(uploadLimit, l, prevCountId, nextCountId); $("#" + hfImgId).val(imgList.join(",")); appendImg(imgContainerId, url); if (l == uploadLimit) { $uploadify_dml.uploadify('disable', true); } } else { alert(jsonData.msg); } } }, 'onUploadError': function (file, errorCode, errorMsg, errorString) { alert("文件名:" + file.name + " " + "错误:" + errorString + "," + errorMsg); }, 'onSelectError': function (errorCode) { alert('这个文件 ' + file.name + ' 超过10M的大小了!'); } }); if (disable) { $uploadify_dml.uploadify('disable', true); } }
2.调用方法
2.1静态标签:
1 <input type="file" id="uploadify_dml1" /> 2 <div class="pic_show" id="imgContainer1"></div> 3 <input type="hidden" id="hfBrandLogo" name="hfBrandLogo" value="<%=BrandLogo %>" /> 4 <span class="c999" style="font-size: 12px;">注:仅限上传一个LOGO</span>
2.2调用方法
1 $("#uploadify_dml1").uploadityPackage({ 2 imgContainerId: "imgContainer1", 3 hfImgId: "hfBrandLogo", 4 imgList: [<%= Maticsoft.Common.StringPlus.ImgStrToArrayStrAndAddHttp(BrandLogo,',')%>], 5 uploadLimit: 1, 6 multi: false, 7 fileUploadType: "BrandJoinLogo" 8 });
3.后台api图片处理处省略。
最终结果:
点击右上角X可以删除图片,重新上传。