拖放图像浏览 Struts 2 中的上传问题

Question

JSP Form ：

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

j查询：

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);
    } 

操作类：公共类上传文件操作扩展...{

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) {}
        });
    });

在操作类中，您可以通过简单地创建一个带有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;
    }