webupload附件上传插件的开发与代码编写

xiaoxiao2025-07-25 42

引入

document.write('<link href="' + rootpath + '/Content/webuploader/webuploader.css" rel="stylesheet" />'); document.write('<script src="' + rootpath + '/Content/webuploader/webuploader.min.js"></script>');

使用插件

<table style="margin: auto" id="submit_table"> <tr> <td colspan="9"> <label style="font-size:15px;"> 上传附件:</label> <input id="attchmentId" name="attchmentId" /> </td> </tr> </table> $("#attchmentId").webupload({ disabled: false, preview: false }); if (pagetype == "show") { $("input").attr("readonly", "readonly"); $(".easyui-combobox").combo('readonly', true); $(".easyui-combotree").combotree('readonly', true); $('.easyui-textbox').textbox('readonly'); $(".easyui-my97").my97('disable'); $("#attchmentId").webupload({ disabled: true, preview: true }); } (function (window, $, undefined) { var _Core = function () {}; window.$Core = new _Core(); var config = function () { return { //附件上传单文件大小限制 WebUpload_fileSingleSizeLimit: 50 * 1024 * 1024, //ajax请求超时时间 ajaxTimeout: 500000 }; }; $Core.Config = new config(); })(window, jQuery); (function ($) { var DOWN_PATH = $Core.SERVICEPATH() + "plugs/attachment/get/"; var UP_PATH = $Core.SERVICEROOT() + 'zuul/plugs/attachment/fileUpload'; //WebUploader.Uploader.register({ // "before-send-file": "beforeSendFile" //}, { // beforeSendFile: function (file) { // var task = new $.Deferred(); // (new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function (percentage) { // }).then(function (val) { // //console.log("用时：" + ((new Date()).getTime() - d1.getTime())); // console.log(file.id + "md5：" + val); // //task.reject(); // task.resolve(); // }); // return $.when(task); // } // }); function create(target) { var state = $.data(target, 'webupload'); var opts = state.options; var t = $(target); var $htmlUpload = t.next().find(".uploader"); if (!t.hasClass("webupload-f")) { t.addClass("webupload-f"); var name = t.attr("name"); t.attr("textboxname", name).removeAttr("name"); var $textbox = $('<input type="hidden" class="textbox-value" value="">'); $textbox.attr("name", name); $htmlUpload = $('<div class="webupload"><div class="uploader">' + '<div class="command">' + '<div class="uploader-picker">上传文件</div> ' + //'<button type="button" class="uploader-up btn btn-primary">开始上传</button> ' + //'<button type="button" class="uploader-retry btn btn-primary">全部重试</button> ' + // '<button type="button" class="uploader-clear ">' + // '<i class="glyphicon glyphicon-trash"></i> 清空所有</button>' + '</div><div class="uploader-list"></div></div></div>' ); $htmlUpload.append($textbox); t.hide(); t.after($htmlUpload); var $command = $htmlUpload.find(".command"); var $picker = $htmlUpload.find(".uploader-picker"); var $uploaderList = $htmlUpload.find(".uploader-list"); opts.pick = $picker[0]; var uploader = WebUploader.create(opts); uploader.on('uploadBeforeSend', function(object, data, header) { var user = $Core.USER(); header = $.extend(header, { 'token': user.TOKEN, 'appid': user.APP_ID }); }); //当文件被加入队列以后触发。 uploader.on('fileQueued', function(file) { if (file.size > $Core.Config.WebUpload_fileSingleSizeLimit) { alert(file.name + "单文件不能超过" + WebUploader.Base.formatSize($Core.Config.WebUpload_fileSingleSizeLimit, 0)); uploader.removeFile(file, true); return false; } var $li = createFileItem(uploader, file, opts); $uploaderList.append($li); }); //当文件被移除队列后触发。 uploader.on("fileDequeued", function(file) { $("#" + file.id).fadeOut(function() { $(this).remove(); changevalue(target); }); //console.log(file); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function(file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); //console.log("percentage:", percentage); // 避免重复创建 if (!$percent.length) { $percent = $('<p class="progress"><span></span></p>') .appendTo($li) .find('span'); } $percent.css('width', percentage * 100 + '%'); }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function(file, response) { //console.log(response); var $fileitem = $('#' + file.id); if (response.code != undefined && response.code === 0) { //response.data.attachmentId $fileitem.attr("attachmentId", response.data.attachmentId); var $attachmentsize = $fileitem.find(".attachment-size"); $attachmentsize.append('<a title="下载" href = "' + DOWN_PATH + response.data.attachmentId + '" class="btn btn-default btn-xs pull-right" > ' + '<i class="fa fa-cloud-download" ></i> ' + '</a>'); } $fileitem.addClass('upload-state-done').find(".error").remove(); changevalue(target); }); // 文件上传失败，现实上传出错。 uploader.on('uploadError', function(file, reason) { //console.log(reason); var $li = $('#' + file.id), $error = $li.find('div.error'); // 避免重复创建 if (!$error.length) { $error = $('<div class="error"></div>').appendTo($li); "".format("123"); } $error.text('上传失败' + reason); }); // 完成上传完了，成功或者失败，先删除进度条。 uploader.on('uploadComplete', function(file) { $('#' + file.id).find('.progress').remove(); }); //当所有文件上传结束时触发。 uploader.on("uploadFinished", function() { }); state.uploader = uploader; } if (opts.disabled === true) { disable(target); } else { enable(target); } if (opts.preview === false) { $htmlUpload.find(".uploader-list").addClass("nopreview"); } } /* '<a href = "#" class="btn btn-default btn-xs pull-right" > ' + '<i class="fa fa-cloud-download" ></i> ' + '</a>' + * / /** * * @param {any} uploader * @param {any} file */ function createFileItem(uploader, file, opts) { var $li = $(( '<div id="{0}" class="file-item">' + '<span class="mailbox-attachment-icon"><i class= "fa fa-file-pdf-o" ></i></span>' + ' <div class="info">' + '<i class= "fa fa-paperclip" ></i > ' + '<a href="#" class="attachment-name" title="{1}">{1}</a> ' + '<span class="attachment-size"> ' + '<span>{2}</span> ' + '<a href="#" class="btn btn-default btn-xs pull-right filedel">' + '<i class="fa fa-close"></i>' + '</a>' + '</span>' + '</div >' + '</div>').format(file.id, file.name, WebUploader.Base.formatSize(file.size)) ), $close = $li.find(".filedel"), $attachmentIcon = $li.find(".mailbox-attachment-icon"), $attachmentIcon_icon = $attachmentIcon.find(".fa"), $attachmentsize = $li.find(".attachment-size") ; if (file.attachmentId) { $li.attr("attachmentId", file.attachmentId); $attachmentsize.append('<a title="下载" href = "' + DOWN_PATH + file.attachmentId + '" class="btn btn-default btn-xs pull-right" > ' + '<i class="fa fa-cloud-download" ></i> ' + '</a>'); } $close.click(function () { var fileId = $(this).parent().parent().parent().attr("id"); //alert(fileId); //uploader.cancelFile(fileId); uploader.removeFile(fileId, true); }); //var iconclass = "icon-new_file"; if (opts.preview === true) { switch (file.ext.toLowerCase()) { case "gif": case "jpg": case "jpeg": case "bmp": case "png": $attachmentIcon.addClass("has-img").html(""); var $img = $("<img>").appendTo($attachmentIcon); if (file.attachmentId) { $img.attr("src", DOWN_PATH + file.attachmentId); } else { uploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src', src); }, 500, 460); } $img.click(function () { layer.open({ type: 1, title: false, closeBtn: 0, area: '50%', skin: 'layui-layer-nobg', //没有背景色 shadeClose: true, content: '<img src="' + $img.attr("src") + '" style="width:100%" />' }); }); break; case "docx": case "dox": $attachmentIcon_icon.attr("class", "fa fa-file-word-o"); break; case "xlsx": case "xls": $attachmentIcon_icon.attr("class", "fa fa-file-excel-o"); break; case "pptx": case "ppt": $attachmentIcon_icon.attr("class", "fa fa-file-powerpoint-o"); break; case "zip": case "rar": $attachmentIcon_icon.attr("class", "fa fa-file-zip-o"); break; case "mp4": case "avi": case "mkv": case "mov": case "m4v": case "3gp": case "wmv": case "rm": case "rmvb": $attachmentIcon_icon.attr("class", "fa fa-file-video-o"); break; case "mp3": case "wma": case "wav": case "ape": case "aac": case "flac": $attachmentIcon_icon.attr("class", "fa fa-file-audio-o"); break; case "txt": case "text": $attachmentIcon_icon.attr("class", "fa fa-file-text-o"); break; default: $attachmentIcon_icon.attr("class", "fa fa-file-o"); break; } } else $attachmentIcon.hide(); return $li; } function changevalue(target) { var t = $(target); var htmluploader = t.next(); var uploderList = htmluploader.find(".uploader-list"); var $textbox = htmluploader.find(".textbox-value"); var fileItems = uploderList.find("[attachmentId]"); var fileid = []; $.each(fileItems, function (i, item) { var n = $(item); fileid.push(n.attr("attachmentId")); }); $textbox.val(fileid.join(",")); } function getstate(target) { return $.data(target, 'webupload'); } function setValue(target, value) { var t = $(target); var state = getstate(target); var uploader = state.uploader; var opts = state.options; var $htmlUpload = t.next().find(".uploader-list"); $htmlUpload.empty(); if (value) { $.get("/plugs/attachment/getByIds/" + value, function (result) { if (result.data) { $.each(result.data,function (i, n) { if (n != null) $htmlUpload.append(createFileItem(uploader, { id: n.attachmentId, name: n.fileName, size: n.fileSize, attachmentId: n.attachmentId, ext: n.attachmentType.replace(".", "") }, opts)); }); //t.combo("setText", fileNames.join(",")); } changevalue(); }); } changevalue(); t.next().find(".textbox-value").val(value); } function getValue(target) { var t = $(target); //otps = $.data(target, 'webupload'), // uploader = otps.uploader; var htmluploader = t.next(); var $textbox = htmluploader.find(".textbox-value"); return $textbox.val(); } function isInProgress(target) { var t = $(target); var state = getstate(target), uploader = state.uploader; return uploader.isInProgress(); } function disable(target) { var t = $(target); var state = getstate(target); var opts = state.options; opts.disabled = true; var htmluploader = t.next().find(".uploader"); htmluploader.addClass("disabled"); //htmluploader.find(".filedel").hide(); } function enable(target) { var t = $(target); var state = getstate(target); var opts = state.options; opts.disabled = false; var htmluploader = t.next().find(".uploader"); htmluploader.removeClass("disabled"); //htmluploader.find(".filedel").show(); } function getUploader(target) { var state = getstate(target); return state.uploader; } $.fn.webupload = function (options, param) { if (typeof options == "string") { var method = $.fn.webupload.methods[options]; if (method) { return method(this, param); } } options = options || {}; return this.each(function () { var state = $.data(this, "webupload"); if (state) { $.extend(state.options, options); } else { $.data(this, "webupload", { options: $.extend({}, $.fn.webupload.defaults, $.fn.webupload.parseOptions(this), options) }); } create(this); }); }; $.fn.webupload.methods = { options: function (jq) { var opts = $.data(jq[0], 'webupload').options; return opts; }, setValue: function (jq, value) { return jq.each(function () { setValue(this, value); }); }, getValue: function (jq) { return getValue(jq[0]); }, isInProgress: function (jq) { return isInProgress(jq[0]); }, disable: function (jq) { return jq.each(function () { disable(this); }); }, enable: function (jq) { return jq.each(function () { enable(this); }); }, uploader: function(jq) { return getUploader(jq[0]); } }; $.fn.webupload.parseOptions = function (target) { return $.extend({}, $.parser.parseOptions(target, [ "dnd", "disableGlobalDnd", "paste", "pick", "accept", "thumb", "compress", "runtimeOrder", "formData", "fileVal", "method", "sendAsBinary", { auto: "boolean", prepareNextFile: "boolean", chunked: "boolean", duplicate: "boolean", preview: "boolean" }, { chunkSize: "number", chunkRetry: "number", threads: "number", fileNumLimit: "number", fileSizeLimit: "number", fileSingleSizeLimit: "number" } ])); }; $.fn.webupload.defaults = { // swf文件路径 swf: '/Content/webuploader/Uploader.swf', // 文件接收服务端。 server: UP_PATH, // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. //pick: '#picker', // 自动上传。 auto: true, //compress: { // // 图片质量，只有type为`image/jpeg`的时候才有效。 // quality: 95, // // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false. // allowMagnify: false, // // 是否允许裁剪。 // crop: false, // // 是否保留头部meta信息。 // preserveHeaders: true, // // 如果发现压缩后文件大小比原来还大，则使用原来图片 // // 此属性可能会影响图片自动纠正功能 // noCompressIfLarger: false, // // 单位字节，如果图片大小小于此值，不会采用压缩。 // compressSize: 0 //}, //chunked: true, fileVal: "fileName", preview: true, //是否显示图标预览 prepareNextFile: true, accept: [{ title: 'file', extensions: 'doc,docx,pdf,xls,xlsx,ppt,pptx,gif,jpg,jpeg,bmp,png,rar,zip,txt,text', mimeTypes: '.doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.gif,.jpg,.jpeg,.bmp,.png,.rar,.zip,.txt,.text' }] //单文件限制大小 //fileSingleSizeLimit: 1024 * 1024 * 5, }; $.parser.plugins.push("webupload"); if ($.fn.form) { $.fn.form.defaults.fieldTypes.unshift("webupload"); //$.array.insert($.fn.form.comboList, 0, "my97"); } })(jQuery); @Controller @RequestMapping("/attachment") public class AttachmentController extends BaseController<AttachmentService,Attachment> { @Autowired private AttachmentVOService attachmentVOService; /** * 实现文件上传 * */ @RequestMapping("fileUpload") @ResponseBody public AssembleJSON fileUpload(@RequestParam("fileName") MultipartFile file){ AssembleJSON json = null; if(file.isEmpty()){ throw new CntenException(this,"-001","文件获取失败"); } Attachment attachment = null; try { attachment = saveAttachment(file); json = AssembleJSON.SUCCESS(attachment); } catch (Exception e) { //e.printStackTrace(); json = AssembleJSON.FAILURE("附件存储异常",e.getMessage()); } return json; } public Attachment saveAttachment(MultipartFile file) throws Exception{ Attachment attachment = new Attachment(); attachment.setFileName(file.getOriginalFilename()); String fileType = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."),file.getOriginalFilename().length()); attachment.setAttachmentType(fileType); attachment.setIsDelete(0); //attachment.setUserId(getCurrUserData().getUserId()); attachment.setAttachmentContent(file.getBytes()); attachment.setFileSize((int)file.getSize()); attachment.setCreateDate(new Date()); attachment = service.insert(attachment); attachment.setAttachmentContent(null); return attachment; } /** * 实现多文件上传 * * 多文件上传，只返回成功。返回结果包含多个文件存储的结果，如果某个结果为null 就证明该文件存储失败 * */ @RequestMapping("multiFileUpload") @ResponseBody public AssembleJSON multiFileUpload(HttpServletRequest request){ List<MultipartFile> files = ((MultipartHttpServletRequest)request).getFiles("fileName"); if(files.size()<=0){ throw new CntenException(this,"-001","文件获取失败"); } List<Attachment> dataList = new ArrayList<Attachment>(); Attachment attachment = null; for (MultipartFile file: files) { try { attachment = saveAttachment(file); } catch (Exception e) { e.printStackTrace(); attachment = new Attachment(); } dataList.add(attachment); } return AssembleJSON.SUCCESS(dataList); } @GetMapping("/get/{attId}") public void download(@PathVariable Integer attId, HttpServletResponse response) throws IOException { Attachment attachment = service.getById(attId); String fileName = new String(attachment.getFileName().getBytes("UTF-8"),"ISO8859-1");//中文需要编码下 response.addHeader("Content-Disposition", "attachment;filename=" + fileName); response.addHeader("Content-Type","application/octet-stream;charset=UTF-8"); ServletOutputStream out = response.getOutputStream(); out.write(attachment.getAttachmentContent()); out.flush(); out.close(); } @GetMapping("/getByIds/{attIds}") @ResponseBody public AssembleJSON getVOByIds(@PathVariable String attIds){ if("null".equals(attIds) || "".equals(attIds)){ return AssembleJSON.FAILURE("参数错误"); } String[] strings = attIds.split(","); List<AttachmentVO> list = new ArrayList<>(); for(String id : strings){ AttachmentVO attachmentVO = attachmentVOService.getById(Integer.parseInt(id)); list.add(attachmentVO); } return AssembleJSON.SUCCESS(list); }

补充

转载请注明原文地址: https://www.6miu.com/read-5033696.html

Java

最新回复(0)