拖拽圖片瀏覽上傳問題的Struts 2

Question

JSP表單：

<s:form method="POST" enctype="multipart/form-data" action="uploaddocumentfile" id="uploaddocumentfile" namespace="/documents" > 
     <s:file name="upload" id="holder"></s:file> 
    /s:form> 

jQuery的：

function readfiles(files) { 
    console.log(files); 
    var a=files[0].name; // name of file 
    $("#uploaddocumentfile").submit(); // problem :how to pass value in action class of type File upload getter setter 
} 
var holder = document.getElementById('holder'); 
holder.ondragover = function() { this.className = 'hover'; return false; }; 
holder.ondragend = function() { this.className = ''; return false; }; 
holder.ondrop = function (e) { 
    this.className = ''; 
    // console.log(e.dataTransfer.files[0].path); 
    e.preventDefault(); 
    readfiles(e.dataTransfer.files); 
    } 

Action類： 公共類UploadFilesAction擴展... {

private File upload; 

public File getUpload() { 
    return upload; 
} 
public void setUpload(File upload) { 
    this.upload = upload; 
} 
} 

問題：在瀏覽文件上傳，我們可以通過文件上傳的getter setter方法，但拖放自動獲得在動作類表單文件值，我們怎樣才能得到文件的值

Answer 1

您可以使用dropzonejs插件來實現拖放文件

JSP

<div id="template_dropzone"></div> 

腳本

var profilePic = null; 
var dropZone = $('#template_dropzone').dropzone({ 
       url: "#", 
       maxFiles: 1, 
       addRemoveLinks: true, 
       init: function() { 
        this.on("addedfile", function(file) { 
        // trigger when a file is added 
       }); 
        this.on("complete", function(file) { 
         // trigger when the uploading of a file is completed 
         profilePic = file; 
        }); 
        this.on("removedfile", function(file) { 
         var noOfFiles = this.files.length; // can check No. of files 
        }); 
       }); 
    $('#uploadFile').on('click',function(event){ 
     var data = new FormData(); 
     data.append('upload',profilePic); 
     $.ajax({ 
      url: 'uploadProfilePic', 
      method: 'POST', 
      data: data, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function(result) {} 
     }); 
    }); 

在Action類可以通過簡單地創建與getter和setter像下面String變量檢索文件名或內容類型： -

private File upload; 
    private String uploadFileName; 
    private String uploadContentType; 

    public File getUpload() { 
     return upload; 
    } 

    public void setUpload(File upload) { 
     this.upload = upload; 
    } 

    public String getUploadFileName() { 
     return uploadFileName; 
    } 

    public void setUploadFileName(String uploadFileName) { 
     this.uploadFileName = uploadFileName; 
    } 

    public String getUploadFileContentType() { 
     return uploadFileContentType; 
    } 

    public void setUploadFileContentType(String uploadFileContentType) { 
     this.uploadFileContentType = uploadFileContentType; 
    }