2012-08-04 207 views
4

我在包含某些輸入元素的LightBox中使用表單。由於沒有找到多部分邊界,請求被拒絕

<form name="imageUploadForm" action="uploadImage.do" method="post" enctype="multipart/form-data"> 
<input type="text" id="id" name="id" style="display: none;" value=""> 
    <div id="fileUploaderDiv"> 
     <input type='file' name="file0" id ="file0" /> 
    </div> 
<input type="submit" value="Submit"> 
</form> 

當我提交表單比表單重定向到它的動作位置。我只想提交沒有重定向用戶的表單,因此用戶不會丟失他的數據就停留在lightbox上。

我在FileUploader的servlet嘗試jQuery的AJAX調用此

var data = new FormData(); 
var $inputs = $('#imageUploadForm :input'); 
var values = {}; 
    $inputs.each(function() { 
       values[this.name] = $(this).val(); 
       data.append(this.name, $(this).val()); 
      }); 
$.ajax({ 
       url: 'uploadImage.do', 
       data: data, 
       cache: false, 
       contentType: 'multipart/form-data', 
       processData: false, 
       type: 'POST', 
       success: function(data){ 
        alert(data); 
       } 
      }); 

但得到錯誤在服務器端。

The request was rejected because no multipart boundary was found 

有人能告訴我我在想什麼嗎?

+0

搜索AJAX。 – elclanrs 2012-08-04 19:00:16

+0

yup AJAX應該這樣做。 – 2012-08-04 19:01:04

+0

有提交按鈕觸發JS事件,收集數據和(像elclanrs說) - > AJAX – dgeare 2012-08-04 19:02:18

回答

1

這是使用jQuery Ajax提交表單最簡單的形式。我沒有測試過這一點,但它應該工作:-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Test form</title> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#sbmt').click(function(){ 
      var text1 = $('#text1').val(); 
      var text2 = $('#text2').val(); 
      /// validation of inputs 
      ///then 
      $.ajax(
      { 
       url :'submit.php', 
       type : 'post', 
         data : {'text1' : text1, 'text2' : text2 }, 
       success: function(data){ 
         alert("form submitted . response is :"+ data); 
        } 
      } 
      ).fail(function(){alert("Failed!!");}); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="myform"> 
     <input type="text" id="text1" /> 
     <input type="text" id="text2" /> 
     <input type="button" id="sbmt" value="submit"/> 
    </form> 
</body> 
</html> 
+0

順便說一句,它現在看起來像你想通過一個文件的形式。這比那更復雜。在google中搜索Valums Uploader。如果你需要ajax文件上傳,這是一個很好的上傳器 – Gogol 2012-08-04 19:16:27

+0

對你付出的努力印象深刻。 :-) – dgeare 2012-08-04 19:17:14

+0

謝謝你。我喜歡堆棧交換,並從這裏學到了很多東西。所以我盡我所能回答:) – Gogol 2012-08-04 19:21:31

2

您需要防止提交表單的默認操作:使用時

$('form[name="imageUploadForm"]').on('submit', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
      type: 'POST', 
      url: 'uploadImage.do', 
      data: data, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function(data){ 
       alert(data); 
      } 
    }); 
}); 

我相信你應該設置的contentType選項設置爲false FormData類,強制jQuery不要添加Content-Type標頭,否則邊界字符串將會丟失,這可能是您的服務器錯誤的原因。

您還必須將processData標誌設置爲false,否則,jQuery將嘗試將您的FormData轉換爲字符串,這將失敗。

+0

我試過你的解決方案,但谷歌瀏覽器拋出Uncaught TypeError:非法調用。 b_ f.extend.param f.extend.ajax (匿名函數) f.event.dispatch f.event.add.h.handle.i – 2012-08-04 19:48:15