使用JavaScript在Spring MVC中上傳圖像進行預覽

Question

我正在編寫一個Spring MVC應用程序，用於將圖像上傳到服務器。 我的Java部分工作正常，但是我在這里需要JavaScript，但我對它不是很熟悉，對不起，如果我提出明顯的要求。

當我在視圖中僅使用具有以下html格式的控制器時，一切正常：

<form method="POST" action="upload" enctype="multipart/form-data">
        <input type="file" name="file" multiple><br/>
        <input type="submit" value="Upload">
</form>

我只是在我的控制器中使用@RequestMapping攔截並獲取文件。

但是我需要在上傳之前預覽我的照片。 我發現了以下代碼，它也很好用：

<html>
<head>
<style type="text/css">.thumb-image{float:left;width:100px;position:relative;padding:5px;}.selectedItem{border:2px solid blue;}</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="wrapper" style="margin-top: 20px;">
<p><b>For deleting thumb-image: click on image to select and press delete button.</b> </p>
<input id="fileUpload" multiple="multiple" type="file"/> 
<button id="btnDelete">Delete</button>
<div id="image-holder">
</div>
<br/><br/>

</div>

<script>
$(document).ready(function() {

$("#image-holder").on('click','.thumb-image',function(){
   $(this).toggleClass("selectedItem");
});

$("#btnDelete").on("click",function(){
$(".selectedItem").remove();
});

        $("#fileUpload").on('change', function() {
          //Get count of selected files
          var countFiles = $(this)[0].files.length;
          var imgPath = $(this)[0].value;
          var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
          var image_holder = $("#image-holder");
          image_holder.empty();
          if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
            if (typeof(FileReader) != "undefined") {
              //loop for each file selected for uploaded.
              for (var i = 0; i < countFiles; i++) 
              {
                var reader = new FileReader();
                reader.onload = function(e) {
                  $("<img />", {
                    "src": e.target.result,
                    "class": "thumb-image"
                  }).appendTo(image_holder);
                }
                image_holder.show();
                reader.readAsDataURL($(this)[0].files[i]);
              }
            } else {
              alert("This browser does not support FileReader.");
            }
          } else {
            alert("Pls select only images");
          }
        });
      });
</script>
</body>
</html>

但是我現在不知道如何將其傳遞給我的控制器。 我應該在哪里放置action="upload"或其他東西來使其正常工作？ 這里沒有表格，也沒有提交按鈕。 謝謝！

Answer 1

嘗試這個;）

 <html> <head> <style type="text/css">.thumb-image{float:left;width:100px;position:relative;padding:5px;}.selectedItem{border:2px solid blue;}</style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <p><b>For deleting thumb-image: click on image to select and press delete button.</b> </p> <form method="POST" action="upload" enctype="multipart/form-data"> <input id="fileUpload" multiple="multiple" type="file"/> <input type="submit" value="Upload"> <button id="btnDelete">Delete</button> </form> <div id="image-holder"> </div> <br/><br/> </div> <script> $(document).ready(function() { $("#image-holder").on('click','.thumb-image',function(){ $(this).toggleClass("selectedItem"); }); $("#btnDelete").on("click",function(){ $(".selectedItem").remove(); }); $("#fileUpload").on('change', function() { //Get count of selected files var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof(FileReader) != "undefined") { //loop for each file selected for uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function(e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("This browser does not support FileReader."); } } else { alert("Pls select only images"); } }); }); </script> </body> </html>

使用JavaScript在Spring MVC中上傳圖像進行預覽

問題描述

1 個解決方案

解決方案1
2 已采納 2016-05-17 02:38:54

使用JavaScript在Spring MVC中上傳圖像進行預覽

問題描述

1 個解決方案

解決方案1 2 已采納 2016-05-17 02:38:54

解決方案1
2 已采納 2016-05-17 02:38:54