本篇文章為大家展示了怎么在Java中利用dropzone.js實現(xiàn)一個文件拖拽上傳功能,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
創(chuàng)新互聯(lián)于2013年成立,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元城陽做網(wǎng)站,已為上家服務(wù),為城陽各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108
jsp頁面:
1. 首先必須引入dropzone的js和css文件
2.自己定義兩個div區(qū)域
<%--拖拽文件上傳 --%>uopload
這是我的文件上傳之后的文件隊列區(qū)域:
3.對dropzone.css進行修改,將文件內(nèi)的所有dropzone替換為dropz
修改文件拖拽區(qū)域的顯示樣式:
.dropz {/*設(shè)置拖拽上傳文件按鈕的格式*/ min-height:0px; min-width: 100px; border: 1px solid #58AF0C; background: white; padding: 15px 20px; background-color: #7AC143; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #7AC143), color-stop(1, #7AC143)); background-position: center top; background-repeat: no-repeat; border-radius: 5px; min-height:0px; min-width: 100px; padding: 15px 20px; color: #FFF; font: bold 12px Arial, Helvetica, sans-serif; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .dropz.dz-clickable { cursor: pointer; line-height: 0px;/*按鈕中的文字垂直居中*/ }
4.在jsp對div進行dropzone參數(shù)的自定義
java后臺處理文件上傳的代碼:
@RequestMapping(params = "saveFile", method = RequestMethod.POST) public void saveFile(HttpServletRequest request, HttpServletResponse response, TSDocument document) throws Exception{ Mapattributes = new HashMap (); TSTypegroup tsTypegroup=systemService.getTypeGroup("fieltype","文檔分類"); TSType tsType = systemService.getType("files","附件", tsTypegroup); String fileKey = oConvertUtils.getString(request.getParameter("fileKey"));// 文件ID String documentTitle = oConvertUtils.getString(request.getParameter("documentTitle"),"uploadfile");// 文件標題 if (StringUtil.isNotEmpty(fileKey)) { document.setId(fileKey); document = systemService.getEntity(TSDocument.class, fileKey); document.setDocumentTitle(documentTitle); } document.setBusinessKey(request.getParameter("businessKey")); document.setSubclassname(MyClassLoader.getPackPath(document)); document.setCreatedate(DateUtils.gettimestamp()); document.setTSType(tsType); UploadFile uploadFile = new UploadFile(request, document); uploadFile.setCusPath("files"); uploadFile.setSwfpath("swfpath"); document = systemService.uploadFile(uploadFile); attributes.put("url", document.getRealpath()); attributes.put("fileKey", document.getId()); if (ResourceUtil.getSessionUserName()!=null) { attributes.put("uploadUser", ResourceUtil.getSessionUserName().getUserName()); }else{ attributes.put("uploadUser", "null"); } attributes.put("time", new SimpleDateFormat("yyyy-MM-dd").format(new Date())); attributes.put("name", document.getAttachmenttitle()+"."+document.getExtend()); attributes.put("downloadurl", "commonController.action?viewFile&fileid="+ document.getId()+"&subclassname="); attributes.put("viewhref", "commonController.action?objfileList&fileKey=" + document.getId()); attributes.put("delurl", "commonController.action?delObjFile&fileKey=" + document.getId()); attributes.put("realPath", document.getRealpath()); if(FileUtils.isPicture(document.getExtend())){ attributes.put("imgUrl", document.getRealpath()); } JSONObject js = new JSONObject(attributes); response.getWriter().write(js.toString()); response.getWriter().flush(); }
注意這里的返回值是直接返回的json對象,如果采用
@RequestMapping(params = "saveFiles", method = RequestMethod.POST) @ResponseBody
則會報錯:
復(fù)制代碼 代碼如下:
[com.framework.core.common.exception.MyExceptionHandler]org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation
上述內(nèi)容就是怎么在Java中利用dropzone.js實現(xiàn)一個文件拖拽上傳功能,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。