如何使用JSP/Servlet和Ajax將文件上傳到服務器？

Question

我正在創建一個JSP/Servlet Web應用程序，我想通過Ajax將文件上傳到Servlet。我會如何去做這件事？我正在使用jQuery。

我迄今所做的：

<form class="upload-box"> 
    <input type="file" id="file" name="file1" /> 
    <span id="upload-error" class="error" /> 
    <input type="submit" id="upload-button" value="upload" /> 
</form> 

有了這個jQuery的：

$(document).on("#upload-button", "click", function() { 
    $.ajax({ 
     type: "POST", 
     url: "/Upload", 
     async: true, 
     data: $(".upload-box").serialize(), 
     contentType: "multipart/form-data", 
     processData: false, 
     success: function(msg) { 
      alert("File has been uploaded successfully"); 
     }, 
     error:function(msg) { 
      $("#upload-error").html("Couldn't upload file"); 
     } 
    }); 
}); 

但是，它不會出現發送文件內容。

Answer 1

爲了這一點，作爲當前XMLHttpRequest版本1 13759 jQuery的，它是不可能通過XMLHttpRequest上傳使用JavaScript文件。常用的解決方法是讓JavaScript創建一個隱藏的並將表單提交給它，以便創建它的異步發生的印象。這也正是大多數jQuery文件上傳插件所做的，例如jQuery Form plugin（example here）。

假設與HTML表單你的JSP中這樣的方式被重寫，這樣它不是破當客戶有JS禁用（因爲你現在有...），如下圖所示：

<form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data"> 
    <input type="file" id="file" name="file1" /> 
    <span id="upload-error" class="error">${uploadError}</span> 
    <input type="submit" id="upload-button" value="upload" /> 
</form> 

然後，它使用jQuery形式的幫助插件只是一個

<script src="jquery.js"></script> 
<script src="jquery.form.js"></script> 
<script> 
    $(function() { 
     $('#upload-form').ajaxForm({ 
      success: function(msg) { 
       alert("File has been uploaded successfully"); 
      }, 
      error: function(msg) { 
       $("#upload-error").text("Couldn't upload file"); 
      } 
     }); 
    }); 
</script> 

事至於servlet的一面，沒有什麼特別的東西需要在這裏完成。只是實現它完全一樣的方式，你會不會使用Ajax時做到：How to upload files to server using JSP/Servlet?

如果X-Requested-With頭等於XMLHttpRequest與否您只需要在servlet額外的檢查，讓你知道如何什麼樣的響應返回的情況下，客戶端已禁用JS（截至目前，它主要是舊的移動瀏覽器，JS禁用）。

if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) { 
    // Return ajax response (e.g. write JSON or XML). 
} else { 
    // Return regular response (e.g. forward to JSP). 
} 

注意，相對較新的版本XMLHttpRequest 2能夠發送使用新FileFormData和API的所選文件的。另請參閱HTML5 File Upload to Java Servlet和sending a file as multipart through xmlHttpRequest。

Answer 2

此代碼工作正常，我：

$('#fileUploader').on('change', uploadFile); 
 

 

 
function uploadFile(event) 
 
\t { 
 
\t  event.stopPropagation(); 
 
\t  event.preventDefault(); 
 
\t  var files = event.target.files; 
 
\t  var data = new FormData(); 
 
\t  $.each(files, function(key, value) 
 
\t  { 
 
\t   data.append(key, value); 
 
\t  }); 
 
\t  postFilesData(data); 
 
\t } 
 
\t 
 
function postFilesData(data) 
 
\t { 
 
\t $.ajax({ 
 
     url: 'yourUrl', 
 
     type: 'POST', 
 
     data: data, 
 
     cache: false, 
 
     dataType: 'json', 
 
     processData: false, 
 
     contentType: false, 
 
     success: function(data, textStatus, jqXHR) 
 
     { 
 
     \t //success 
 
     }, 
 
     error: function(jqXHR, textStatus, errorThrown) 
 
     { 
 
      console.log('ERRORS: ' + textStatus); 
 
     } 
 
\t  }); 
 
\t }

<form method="POST" enctype="multipart/form-data"> 
 
\t <input type="file" name="file" id="fileUploader"/> 
 
</form>

Answer 3

@ Monsif的代碼工作好，如果窗體上有唯一的文件類型的輸入，如果有其他然後鍵入文件的一些方面的投入，然後他們迷路了。因此，不是複製每個表單數據並將它們附加到FormData對象，而是將原始表單本身賦予構造函數。

關於@ Monsif的代碼和https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/後，我出來了以下代碼爲我工作。我希望它能幫助別人。

<script type="text/javascript"> 
     var files = null; // when files input changes this will be initiliazed. 
     $(function() { 
      $('#form2Submit').on('submit', uploadFile); 
    }); 

     function uploadFile(event) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      //var files = files; 
      var form = document.getElementById('form2Submit'); 
      var data = new FormData(form); 
      postFilesData(data); 
} 

     function postFilesData(data) { 
      $.ajax({ 
       url : 'yourUrl', 
       type : 'POST', 
       data : data, 
       cache : false, 
       dataType : 'json', 
       processData : false, 
       contentType : false, 
       success : function(data, textStatus, jqXHR) { 
        alert(data); 
       }, 
       error : function(jqXHR, textStatus, errorThrown) { 
        alert('ERRORS: ' + textStatus); 
       } 
      }); 
     } 
</script> 

HTML代碼可以是類似以下內容：

<form id ="form2Submit" action="yourUrl"> 
    First name:<br> 
    <input type="text" name="firstname" value="Mickey"> 
    <br> 
    Last name:<br> 
    <input type="text" name="lastname" value="Mouse"> 
    <br> 
<input id="fileSelect" name="fileSelect[]" type="file" multiple accept=".xml,txt"> 
<br> 
    <input type="submit" value="Submit"> 
</form> 

Answer 4

此代碼對我的作品。

用於公共io.jar &公共文件upload.jar和jQuery的形式插件

<script> 
 
    $(function() { 
 
     $('#upload-form').ajaxForm({ 
 
      success: function(msg) { 
 
       alert("File has been uploaded successfully"); 
 
      }, 
 
      error: function(msg) { 
 
       $("#upload-error").text("Couldn't upload file"); 
 
      } 
 
     }); 
 
    }); 
 
</script>

<form id="upload-form" class="upload-box" action="upload" method="POST" enctype="multipart/form-data"> 
 
    <input type="file" id="file" name="file1" /> 
 
    <span id="upload-error" class="error">${uploadError}</span> 
 
    <input type="submit" id="upload-button" value="upload" /> 
 
</form>

boolean isMultipart = ServletFileUpload.isMultipartContent(request); 

     if (isMultipart) { 
      // Create a factory for disk-based file items 
      FileItemFactory factory = new DiskFileItemFactory(); 

      // Create a new file upload handler 
      ServletFileUpload upload = new ServletFileUpload(factory); 

      try { 
       // Parse the request 
       List items = upload.parseRequest(request); 
       Iterator iterator = items.iterator(); 
       while (iterator.hasNext()) { 
        FileItem item = (FileItem) iterator.next(); 
        if (!item.isFormField()) { 
         String fileName = item.getName();  
         String root = getServletContext().getRealPath("/"); 
         File path = new File(root + "../../web/Images/uploads"); 
         if (!path.exists()) { 
          boolean status = path.mkdirs(); 
         } 

         File uploadedFile = new File(path + "/" + fileName); 
         System.out.println(uploadedFile.getAbsolutePath()); 
         item.write(uploadedFile); 
        } 
       } 
      } catch (FileUploadException e) { 
       e.printStackTrace(); 
      } catch (Exception e) { 
       e.printStackTrace(); 
      } 
     } 
    } 



enter code here