0
私は、サーバーに画像をアップロードするためのSpring MVCアプリケーションを作成しています。私のJavaの部分はうまくいきますが、私はここにJavaScriptが必要です。私はそれにあまり慣れていないので、ごめんなさい。プレビュー用にJavaScriptを使用してSpring MVCに画像をアップロードする
私は私の見解では、次の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"やそれを動作させるために何かを置くべきですか？ここにフォームと送信ボタンはありません。ありがとうございました！
あなたがラップする' '