用ajax jquery設計一個上傳的效果

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天看到不錯的一段代碼,做上傳的,當選擇檔案後,自動出現一個旋轉的表徵圖(當然可以換成文字),上傳用AJAX完成的,上傳後出現另外的表徵圖,
下面代碼筆記之

首先是前台,要引入jquery和ajaxupload.js兩個JS
<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/ajaxupload.3.5.js"></script>
    <script type="text/javascript">
    var uploadIndex = 1;
    $(function() {
       uploadIt();
       deleteFile();
    });
    function uploadIt() {
      $(".uploadAndNext").click(function() {
    var uploadId = "#" + $(this).attr("id");
       var btn = $(this);
       new AjaxUpload( uploadId + "" , {
         action : "UploadServlet" ,
         onChange: function(file, extension){
           $(uploadId + "").parent().find("input")[0].value = file;
           $(uploadId + "").parent().find(".uploadAndOkImg").show().attr("src" , "images/spinner.gif");
           btn.attr("disabled" , "disabled");
         },

         onComplete: function(file, response) {
       $(uploadId + "").parent().find(".uploadAndOkImg").attr("src" , "images/ok.gif");
       $(uploadId + "").parent().find(".deleteImg").attr("src" , "images/delete.gif").show();
       uploadIndex++;
       $("#uploaddiv").append("<div><input type='text' /><button class='uploadAndNext' id='upload" + uploadIndex + "'>瀏覽</button><img src='' width='20px' height='20px' class='uploadAndOkImg' style='display:none'/><img src='' width='20px' height='20px' class='deleteImg' style='display:none' alt='刪除'/></div>");
       uploadIt();
       deleteFile();
         }
       });
      });
    }
    function deleteFile() {
      $("#uploaddiv .deleteImg").click(function() {
        var fileName = $(this).parent().find("input").val();
        var thisObj = $(this);
        $.post("DeleteServlet" , {
         "fileName" : fileName
        },
         function(data) {
          thisObj.parent().remove();
         }
        );
       });
    }
    </script>

</head>

<body>
  <div id="uploaddiv">
   <div><input type="text" /><button class="uploadAndNext" id="upload1">瀏覽</button><img src="" width="20px" height="20px" class="uploadAndOkImg" style="display: none"/><img src="" width="20px" height="20px" class="deleteImg" style="display:none;" alt="刪除"/></div>
  </div>
</body>

然後通過servlet去處理,就是調用那個commons.fileupload組件了
FileItemFactory factory = new DiskFileItemFactory();
  ServletFileUpload upload = new ServletFileUpload(factory);
  try {
   List<FileItem> list = upload.parseRequest(request);
   for (int i = 0; i < list.size(); i++) {
    FileItem fileItem = list.get(i);
    String name = fileItem.getName().substring(fileItem.getName().lastIndexOf("\\") + 1);
    request.getSession().setAttribute(name, true);
    fileItem.write(new File("d:/" + name));
   }
  } catch (FileUploadException e) {
   e.printStackTrace();
  } catch (Exception e) {
   e.printStackTrace();
  }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More