文件上传|没有页面刷新| struts2 |没有闪光|

时间:2012-08-09 07:03:37

标签: javascript jquery ajax file-upload struts2

问题描述:我想使用JSP创建文件上传屏幕。屏幕将允许用户在屏幕上选择多个文件,但所有这些文件只有一个上传按钮。单击上传按钮后,应在Action类中获取所有文件对象。

但重要的是页面在提交后不应该刷新。在同一屏幕上将显示其他信息,在文件上传过程中不应更改。

我的尝试:我使用了简单的struts2文件上传功能,工作正常。但它提交的页面令人耳目一新。 我使用AJAX(JQuery)来解决这个问题。我面对AJAX的问题是它没有将File对象设置为Action类的file属性。因此,我无法在Action类中获取文件对象并进一步处理。

任何人都可以帮助我。

我附上了迄今为止我尝试的任何代码。

JSP

<s:form action="fileUpload" method="post" enctype="multipart/form-data" >
<s:file id="file" name="userImage" cssClass="fileUpload" cssStyle="fileUpload" />
<button id="px-submit">Upload</button>      
</s:form>

<script type="text/javascript">
jQuery(function($){
$('.fileUpload').fileUploader();
});
</script>

JQuery插件This is the jquery plugin that I have used.

行动类

public class FileUploadAction extends ActionSupport{

private File userImage;

public File getUserImage() {
    return userImage;
}

public void setUserImage(File userImage) {
    this.userImage = userImage;
}

public String execute()
{
    try
    {
        System.out.println("file name: " + userImage.toString());

    }
    catch(Exception e)
    {
        e.printStackTrace();
    }

    return SUCCESS;
}

编辑:这是我的struts配置文件。

struts.xml中

<action name="commonDataImportAction_*" class="xxx.Action">
<result name="SUCCESS" type="stream">
            <param name="contentType">text/html</param>
             <param name="inputName">inputStream</param>
        </result>

我在这里得到一个nullpointer,因为文件对象没有设置。

请帮忙。

提前谢谢。 拉夫

2 个答案:

答案 0 :(得分:1)

我正在使用相同的插件,它对我来说很好。我在您的代码中看到的第一个问题是您没有设置要上传的上传按钮的类型。

<button id="px-submit" type="submit">Upload</button>

希望这应该解决除了指针之外的空指针。 此外,如此插件的文档中所述,您需要返回一个json字符串

<div id='message'>success message</div>

成功上传。所以你需要改变你的struts.xml映射。 试试这个,如果你遇到任何进一步的问题,请回复我。 编辑: 好的,这是我要求的代码

<强> JSP

<form action="uploadImage" method="post" enctype="multipart/form-data">
   <input type="file" name="image" class="fileUpload" multiple/>
   <button id="px-submit" type="submit">Save all images</button>
   <button id="px-clear" type="reset">Clear all</button>
</form>

$('.fileUpload').fileUploader({
          autoUpload: false,
          buttonUpload: '#px-submit',
          buttonClear: '#px-clear',
});

动作类

您需要返回流结果。我正在使用一个插件(struts2 jquery plugin),它可以很好地处理它,但你只能因为这个要求而使用它,而是我给你一个代码来返回不使用任何插件的流结果。(取自here

public class UploadImageAction extends ActionSupport{
        private File image;
        private String imageContentType;
        private String imageFileName;
        //getter/setter for these
        public String execute() {
         String status="";         
        try{
              //save file code here    
         status="<div id='message'>successfully uploaded</div>"; //on success
         inputStream = new StringBufferInputStream(status);
        }catch(WhateverException e){
         status="<div id='status'>fail</div><div id='message'>Your fail message</div>"; //on error
         inputStream = new StringBufferInputStream(status);
         //other code
        }

        return SUCCESS;
    }
    private InputStream inputStream;

    public InputStream getInputStream() {
       return inputStream;
    }
}

<强> struts.xml中

<action name="fileUpload" class="com.xxx.action.UploadImageAction">  
    <result type="stream">
      <param name="contentType">text/html</param>
      <param name="inputName">inputStream</param>
    </result>
  </action>

答案 1 :(得分:0)

在表单中添加target属性,并拥有一个名称相同的iframe。在不使用任何插件的情况下直接将多部分表单提交给操作,响应将加载到iframe中。这将解决您的页面刷新问题。如果您需要使用插件,那么我建议使用http://valums.com/ajax-upload/这将使用XHR / Ajax用于现代浏览器,并在旧浏览器中优雅地降级到iframe上传。