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

时间:2017-05-09 07:06:16

标签: struts2 drag-and-drop image-upload

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

动作类: 公共类UploadFilesAction扩展... {

private File upload;

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

问题:在浏览文件上传中,我们可以通过文件上传getter setter自动获取动作类中的表单文件值,但是拖放我们如何获取文件值

1 个答案:

答案 0 :(得分:0)

您可以使用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类中,您可以通过简单地创建一个带有getters和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;
    }