使用ajax上傳圖像和數據

我想使用Ajax上傳一些文本和圖像。我正在使用Struts2框架和簡單的JavaScript。此上傳顯示錯誤如何解決它。使用ajax上傳圖像和數據

在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  [email protected] [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)

來源

2013-01-22 xrcwrn

您無法使用ajax上傳文件（默認情況下），它不支持所有瀏覽器。 –

@LuiggiMendoza然後如何執行這個任務。 – xrcwrn

首先使用Struts 2處理基本文件上傳。如果您需要ajax功能，您可以嘗試使用第三方組件來處理這項工作，例如[blueimp jQuery file upload]（https://github.com/blueimp/jQuery的文件上傳）。 –

這裏是運行代碼：首先，你必須在你的類要創建工作方法，應該擴展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>

現在的Result.jsp

<html> 

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

</body> 
</html>

注： 1 - 有沒有額外的/多個類或JSP u必須建立。 2 - 對於支持Ajax與Struts2的你必須安裝插件Struts2的，jQuery插件

你可以在這裏下載它的jar文件：

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

當你： http://code.google.com/p/struts2-jquery/downloads/detail?name=struts2-jquery-plugin-3.5.1.jar&can=2&q=

與運行它運行它，你可以在你的tesktop文件夾上看到上傳的圖像/文件「UploadedFiles」（不管它是否存在，如果不存在，它將自動創建）

來源

2013-01-29 11:44:27 vicky

使用ajax上傳圖像和數據

回答

相關問題