[英]Upload images in Spring MVC using JavaScript for preview
I'm writing a Spring MVC app for uploading images to server. 我正在编写一个Spring MVC应用程序,用于将图像上传到服务器。 My Java-part works ok, but I need here JavaScript and I'm not very familiar with it, so sorry, if I ask something obvious.
我的Java部分工作正常,但是我在这里需要JavaScript,但我对它不是很熟悉,对不起,如果我提出明显的要求。
When I use only controller with the following html-form in my view everything works ok: 当我在视图中仅使用具有以下html格式的控制器时,一切正常:
<form method="POST" action="upload" enctype="multipart/form-data">
<input type="file" name="file" multiple><br/>
<input type="submit" value="Upload">
</form>
I just intercept this with @RequestMapping in my controller and get my files. 我只是在我的控制器中使用@RequestMapping拦截并获取文件。
But I need my photos to be previewed before upload. 但是我需要在上传之前预览我的照片。 I've found following code and it works great too:
我发现了以下代码,它也很好用:
<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>
But I don't know how to pass this to my controller now. 但是我现在不知道如何将其传递给我的控制器。 Where should I put the
action="upload"
or something to get it work? 我应该在哪里放置
action="upload"
或其他东西来使其正常工作? There is no form and no submit button here. 这里没有表格,也没有提交按钮。 Thank you!
谢谢!
Try this;) 尝试这个;)
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.