使用ajax上传图像和数据

时间:2013-01-22 14:00:34

标签: ajax jsp struts2

我正在尝试使用Ajax上传一些文本和图像。我正在使用Struts2框架和简单的JavaScript。此上传显示错误如何解决。

在JSP页面

    <s:form action="javascript:void(0)" onsubmit="javascript:postUserOwnMessages()"
                                                enctype="multipart/form-data">
<s:textarea rows="2" cols="40" name="message" id="message1">
</s:textarea><br>
<s:file name="user_post_image" id="user_post_image"/>
<s:select name="msg_visibility" id="msg_visibility" list="#{'public':'Public', 'friends':'Friends','me':'Me only'}" value="public"/>
<s:submit value="Post"/>
 </s:form>

在同一页面使用的功能

<script type="text/javascript">
    function postUserOwnMessages()
    {

        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (typeof xmlhttp == "undefined")
        {
            ContentDiv.innerHTML="<h1>XMLHttp cannot be created!</h1>";
        }
        else{

            var message1=document.getElementById('message1').value;
            var  user_post_image=document.getElementById('user_post_image').value;

            var msg_visibility=document.getElementById('msg_visibility').value;
            document.getElementById('message1').value="";
            var query='ownmessages?message='+message1+'&user_post_image='+user_post_image
                +'&msg_visibility='+msg_visibility;

            xmlhttp.open("GET",query,true);
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("messages_and_pages").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.send();
        }
    }
</script>

行动

public class UserMessages extends ActionSupport {

private String userid;
   private String message;
private File user_post_image;
private String user_post_imagePath;
private String user_post_imageContentType;
private String msg_visibility;

public String insert() {

        System.out.println(getMessage()
               + " " + getUser_post_image()
                + " " + getUser_post_imageContentType() + " " +      getUser_post_imagePath());


return SUCCESS;
}
}

显示以下错误/警告

    WARNING: Error setting expression 'user_post_image' with value     '[Ljava.lang.String;@1395750'
    ognl.MethodFailedException: Method "setUser_post_image" failed for object     social.action.UserMessages@765e8c [java.lang.NoSuchMethodException:     social.action.UserMessages.setUser_post_image([Ljava.lang.String;)]
at ognl.OgnlRuntime.callAppropriateMethod(OgnlRuntime.java:1265)
at ognl.OgnlRuntime.setMethodValue(OgnlRuntime.java:1454)

1 个答案:

答案 0 :(得分:0)

这是运行代码: 首先,您必须在类中创建应该扩展ActionSupport的action方法 这是.java类的方法

public String myTest(){
        String filePath = "C:/Documents and Settings/Eeager/Desktop/UploadeFile";
        File fileToCreate = new File(filePath, this.fileUploadFileName);
        try {
            FileUtils.copyFile(this.fileUpload, fileToCreate);              
        } catch (IOException e) {
            return "ERROR"; 
        }
    return "SUCCESS";
}

这是struts.xml配置:

<action name="upload" method="myTest" class="(Your action class, where method is..)">
    <result name="SUCCESS">/result.jsp</result>
</action>

这是必须从中生成请求的index.jsp页面:

<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<s:head />
<sj:head/>
</head>

<body>
<script type="text/javascript">
        $.subscribe('showImage', function(event,data) {
               $("#image").show();
        }$.subscribe('complete', function(event,data) {
               $("#image").hide();
        }
</script>

 <div id="image" style="display:none;min-height: 300px;min-width: 300px">
    <img alt="loading..." height="300px" width="300px" src="pic/loading.gif">
 </div>
<s:form action="upload" enctype="multipart/form-data">

<s:file name="fileUpload" label="Select a File to upload" size="40" />

<sj:submit value="submit" name="submit" targets="test" onBeforeTopics="showImage" onCompleteTopics="complete" />

</s:form>


 <div id="test"></div>

</body>
</html>

现在是result.jsp

<html>

<body>
<h1>Image has loaded</h1>

</body>
</html>

注意: 1-没有额外的/更多的类或jsp你必须构建。   2-要使用struts2启用ajax,你必须安装插件 Struts2-jquery插件

您可以在此处下载其jar文件: http://code.google.com/p/struts2-jquery/downloads/detail?name=struts2-jquery-plugin-3.5.1.jar&can=2&q=

用:

运行它
http://localhost:8080/(project Name)/index.jsp

毕竟当你运行它时,你可以在你的tesktop文件夹“UploadedFiles”上看到上传的图像/文件(无论是否存在,如果不存在,它将自动创建)