2017-05-28 19 views
-1

當我點擊上傳按鈕時,什麼都沒有發生。如何使用Ajax和Servlet上傳文件

此頁面包含另一頁。
所以我需要使用按鈕點擊,因爲主頁面已經有另一種形式並提交按鈕。

我想我的腳本代碼失敗。 UploadImage.jsp 編輯=我添加了我的Servlet和jsp頁面。 FirstOne UploadImage.jsp第二個是AddBand.jsp,lastone是servlet控制器。 isMultiPartContent方法當我點擊上傳按鈕時返回allways false。

<form id="uploadForm" > 
     <div class="form-group"> 
     <label for="bandPicture">GRUP RESMİ</label> 
     <input type="file" accept="image/x-png,image/gif,image/jpeg" id="bandPicture" class="form-control" name="bandPicture"> 
     <input type="button" id="uploadImage" class="btn-success" value="Upload"> 
     <label id="uploadResult"></label> 
     </div> 
    </form> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('#uploadImage').click(function(){ 
      var form = $('#uploadform'); 
      form.submit(); 
      form.submit(function(){ 
      $.ajax({ 
       type: 'Post', 
       url: 'UploadImage', 
       data: form.serialize(), 
       enctype: 'multipart/form-data', 
       success: function(result) { 
       $('#uploadResult').html(result); 
       } 
      }); 
      }); 
     }); 
     }); 
    </script> 


<html> 
<head> 
    <title>Manhattan Live Performance</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" 
     content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" 
     media="all" /> 
    <link href="assets/3thParty/css/bootstrap.min.css" rel="stylesheet" 
     type="text/css" /> 
    <link href="assets/3thParty/css/bootstrap-theme.min.css" 
     rel="stylesheet" type="text/css" /> 

    <script src="assets/3thParty/js/jquery-3.2.1.min.js" 
     type="text/javascript"></script> 
    <script src="assets/3thParty/js/bootstrap.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
     label {color:white !important} 
    </style> 
</head> 
<body> 
    <div class="header"> 
     <jsp:include page="AdminHeader.jsp" /> 
    </div> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6 col-md-offset-3"> 
        <form action="AdminPanel/AddBand" method="Post" enctype="multipart/form-data"> 
         <div class="form-group"> 
          <label for="bandName">GRUP ADI</label> 
          <input type="text" id="bandName" class="form-control" name="bandName"> 
         </div> 
         <div class="form-group"> 

          <div class="row"> 
          <div class="col-md-4"> 
           <label for="member">GRUP ÜYESİ</label> 
           <input type="text" id="member" class="form-control" name="member"> 
           <input type="button" class="btn btn-success" style="float: right;" onClick="addMember();" value="Ekle"> 
          </div> 
          <div class="col-md-8"> 
           <label for="bandName">EKLENEN ÜYELER</label> 
           <select class="form-control" name="memberList" id="memberList"></select> 
           <input type="button" class="btn btn-success" style="float: right;" onClick="deleteMember();" value="Çıkar"> 
          </div> 
          </div> 
         </div> 
         <div> 
          <jsp:include page="UploadImage.jsp"></jsp:include> 
         </div> 
         <div class="form-group"> 
          <label > 
           <input type="checkbox">Haftalık Grup 
          </label> 
         </div> 
         <div class="form-group"> 
          <label for="bandInfo">GRUP HAKKINDA</label></br> 
          <textarea class="form-control" id="editor" rows="6" name="bandInfo"></textarea> 
         </div> 
         <div class="form-group"> 
          <input type="submit" id="submit" class="btn-success" value="GRUBU EKLE"> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    <div class="footer"> 
     <jsp:include page="../Footer.jsp"></jsp:include> 
    </div> 
    <script type="text/javascript"> 
      function addMember() { 
       var opt = document.createElement("option"); 
       opt.text = document.getElementById("member").value; 
       opt.value = document.getElementById("member").value; 
       var select = document.getElementById("memberList"); 
       select.appendChild(opt); 
      } 

      function deleteMember() { 
       var select = document.getElementById("memberList"); 
       select.remove(select.selectedIndex); 
      } 
    </script> 
</body> 
</html> 



    public class UploadImageController extends HttpServlet { 

    /** 
    * 
    */ 
    private static final long serialVersionUID = 6737157694478413704L; 

    // Yüklenecek dizin 
    private static final String UPLOAD_DIRECTORY = "assets/images/upload"; 

    // Upload ayarları 
    private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3; // 3MB 
    private static final int MAX_FILE_SIZE  = 1024 * 1024 * 40; // 40MB 
    private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB 
    private static final String UPLOAD_SUCCESS = "Dosya Yüklendi"; 
    private static final String NO_FILE = "Lütfen Resim Seçin"; 

    @Override 
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
     resp.setContentType("text/plain"); 
     resp.setCharacterEncoding("UTF-8"); 
     PrintWriter out = resp.getWriter(); 
     if(!ServletFileUpload.isMultipartContent(req)) { 
      out.print("enctype = multipart/form-data olmalıdır."); 
      out.flush(); 
      return; 
     } 

     DiskFileItemFactory factory = new DiskFileItemFactory(); 
     factory.setSizeThreshold(MEMORY_THRESHOLD); 
     File repository = new File(System.getProperty("java.io.tmpdir")); 
     System.out.println(repository.getAbsolutePath()); 
     factory.setRepository(repository); 
     ServletFileUpload upload = new ServletFileUpload(factory); 
     upload.setFileSizeMax(MAX_FILE_SIZE); 
     upload.setSizeMax(MAX_REQUEST_SIZE); 
     String uploadPath = getServletContext().getRealPath("") 
       + File.separator + UPLOAD_DIRECTORY; 
     System.out.println(uploadPath); 

     try { 
      List<FileItem> images = upload.parseRequest(req); 
      if (images != null && images.size() > 0) { 
       for (FileItem image : images) { 
        if (!image.isFormField()) { 
         String fileName = new File(image.getName()).getName() + System.currentTimeMillis(); 
         String filePath = uploadPath + File.separator + fileName; 
         File storeFile = new File(filePath); 
         //Dosyayı Kaydet 
         image.write(storeFile); 
         out.print(UPLOAD_SUCCESS); 
        } 
        else out.print("Form elemanı değil"); 
       } 
      } else out.print(NO_FILE); 
     } catch (Exception e) { 
      out.print("Exeption"); 
      e.printStackTrace(); 
     } 
    } 



} 
+2

'沒什麼happend' - 檢查瀏覽器** **開發工具控制檯(F12) - 看看你是否有錯誤,現在 –

回答

0

你不需要提交功能

$(document).ready(function(){ 
    $('#uploadImage').click(function(){ 
     var form = $('#uploadform'); 
     $.ajax({ 
      type: 'Post', 
      url: 'UploadImage', 
      data: form.serialize(), 
      enctype: 'multipart/form-data', 
      success: function(result) { 
      $('#uploadResult').html(result); 
      } 
     }); 
    }); 
    }); 
+0

Sevlet ismultipartcontent返回false。我也在表單標籤中添加enctype。但仍然返回false。 –