2014-07-16 27 views
0

在我目前的春季項目中,某些表單有用於將圖像文件上傳到服務器的字段。但是,當我使用瀏覽器(Firefox)中的網絡監視器檢查哪些參數正在發送到服務器時,我注意到文件上傳字段未發送到服務器(僅列出常規字段)。來自html表單的文件上傳字段不會發送到服務器

我曾經知道只有屬性name被髮送到服務器的領域,我確信這個領域有這個屬性。表單的HTML代碼類似於此:

<form id="command" role="form" class="form" action="Categoria/cadastra" method="post" enctype="multipart/form-data"> 
    <fieldset> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     </div> 
     <div class="panel-body"> 
      <p> 
      <label for="nome" class="form-control">nome</label> 
      <input id="nome" name="nome" class="form-control" type="text" value=""/> 
      </p> 
     </div> 
    </div> 
     <div class="panel panel-default include"> 
      <div class="panel-heading"> 
       Selecione um arquivo de imagem para <i>capa da categoria</i> 
      </div> 
      <div class="panel-body"> 
       <input type="file" name="file" class="form-control"/> 
      </div> 
     </div> 
    <p> 
     <button type="submit" class="btn btn-lg btn-primary">Cadastrar</button> 
    </p> 
    </fieldset> 
</form> 

請求是通過此方法在我的控制器處理:

@RequestMapping(value="cadastra", method=RequestMethod.POST) 
@ResponseBody 
public String cadastrea(@ModelAttribute("object") E object, BindingResult result, @RequestParam(value="file", required=false) MultipartFile file) { 
    if(serv.cadastra(object)) { 
     if(serv.upload_picture(object, file)) 
      return "yes"; 
     else 
      return "data"; 
    } 
    else { 
     return "not"; 
    } 
} 

現在,我使用jQuery腳本來處理髮送的過程向服務器發送請求,接收響應並向用戶顯示消息,告訴處理結果。這是我使用的腳本:

$(document).on('submit', '.form', function (event) { 
    event.preventDefault(); 

    var $form = $(this), url = $form.attr("action"); 
    var posting = $.post(url, $(this).serialize()); 
    posting.done(function(data) { 
     var alert = $("#"+data); 
     alert.css("display", "block"); 
     alert.fadeOut(2500); 
     $(".form").each(function(){ 
      this.reset(); 
     }); 
    }); 
}); 

有人告訴我file類型的字段不能使用Ajax調用發送。這是真的?如果是,是否還有其他方式可以在沒有腳本的情況下執行相同的操作(捕獲服務器的響應並在同一頁面中顯示消息而不是重定向到另一頁面)?

+0

支持XHR2的瀏覽器可以執行Ajax文件上傳,對於其他使用iframe作爲表單目標的瀏覽器。 – Musa

+0

@Musa我嘗試使用firefox和chrome(最新版本)提交表單,並且面臨同樣的問題。我如何使用iframe呢? –

+0

隱藏的iframe示例 - http://stackoverflow.com/questions/16380997/how-can-i-use-jquery-to-dynamically-load-html-into-an-iframe/16381047#16381047 XHR2示例http:// stackoverflow.com/questions/22425110/file-not-uploaded-to-the-server-with-ajax/22425210#22425210 – Musa

回答

0

看看jqueryform插件。我相信他們通過將上傳的文件包裝在隱藏的iframe中並使用ajaxSubmit函數傳遞它來解決此問題。

東西沿着

$('#yourForm').ajaxSubmit({ 
type: 'POST', 
url: 'yourUrl' 
}); 

行應該做的伎倆。在你的控制器中,你會看到HttpContext.Current.Request.Files並處理該集合中的項目。

相關問題