真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

怎么在Java中利用dropzone.js實現(xiàn)一個文件拖拽上傳功能

本篇文章為大家展示了怎么在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ù)的自定義 

 
  $("#div1").dropzone({ 
  url:"systemController.action?saveFile",//上傳文件的地址, 
  maxFiles:1,//最多上傳幾個文件 
  maxFilesize: 5,//文件的大小,單位是M 
  addRemoveLinks:true,//是否有刪除文件的功能 
  dictRemoveFile:"",//刪除文件 
  previewsContainer:"#div2",//文件上傳進度顯示的區(qū)域 
  acceptedFiles: ".jpg,.jpeg,.png,.gif,.xls,.txt,.sql,.rar,.mkv",//支持的格式 
  paramName:'file',//上傳的FILE名稱,即服務(wù)端可以通過此來獲取上傳的文件,如$_FILES['dropimage'] 
  init: function() {//初始化時的事件 
    //$("#uploadfile").uploadFile({success:function(data){ 
     this.on("addedfile", function(file) { 
 
      // Create the remove button 
      var removeButton = Dropzone.createElement(""); 
 
      // Capture the Dropzone instance as closure. 
      var _this = this; 
 
      // Listen to the click event 
      removeButton.addEventListener("click", function(e) { 
       // Make sure the button click doesn't submit the form: 
       e.preventDefault(); 
       e.stopPropagation(); 
       alert("Are you sure to delete?"); 
       // Remove the file preview. 
       _this.removeFile(file); 
       // If you want to the delete the file on the server as well, 
       // you can do the AJAX request here. 
      }); 
      // Add the button to the file preview element. 
      file.previewElement.appendChild(removeButton); 
      }); 
      this.on("success", function(file, data) {  
        if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) { 
          var d = $.parseJSON(data); 
          var fileitem = "" + d.name 
          + " "; 
         $("#fileslist").html(fileitem); 
         $("#attachment").val(d.fileKey + "," + d.name + ";"); 
        }  
        this.removeFile(file); 
      }); 
    } 
}); 

 java后臺處理文件上傳的代碼: 

@RequestMapping(params = "saveFile", method = RequestMethod.POST) 
  public void saveFile(HttpServletRequest request, HttpServletResponse response, TSDocument document) throws Exception{ 
    Map attributes = 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è)資訊頻道。


網(wǎng)頁名稱:怎么在Java中利用dropzone.js實現(xiàn)一個文件拖拽上傳功能
轉(zhuǎn)載來于:http://weahome.cn/article/jhggsg.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部