使用ajax上传图片和数据答案

【问题标题】：uploading image and data using ajax使用ajax上传图片和数据
【发布时间】：2013-01-22 14:00:33
【问题描述】：

我正在尝试使用 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)

【问题讨论】：

不能使用ajax上传文件（默认），不是所有浏览器都支持。
@LuiggiMendoza 那么如何执行此任务。
首先使用 Struts 2 处理基本文件上传。如果您需要 ajax 功能，可以尝试使用第三方组件为您处理这项工作，例如 blueimp jQuery file upload。
我已经完成了struts2中的基本文件上传
上传有什么问题？

标签： ajax jsp struts2

【解决方案1】：

下面是运行代码：首先，您必须在您的类中创建应该扩展 ActionSupport 的操作方法这是.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>

现在结果.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

当你运行它之后，你可以在你的 testktop 文件夹“UploadedFiles”中看到上传的图片/文件（不管它是否存在，如果不存在，它会自动创建）

【讨论】：