在 Spring MVC 中使用 JavaScript 上传图像以进行预览
Posted
技术标签:
【中文标题】在 Spring MVC 中使用 JavaScript 上传图像以进行预览【英文标题】：Upload images in Spring MVC using JavaScript for preview 【发布时间】：2016-09-12 17:59:08 【问题描述】：我正在编写一个用于将图像上传到服务器的 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-imagefloat:left;width:100px;position:relative;padding:5px;.selectedItemborder: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" 或其他东西放在哪里才能让它工作？这里没有表单，也没有提交按钮。谢谢！
【问题讨论】：
您可以使用<form> 包裹<input id="fileUpload" multiple="multiple" type="file"/> ，就像您所做的那样。
【参考方案1】：
试试这个；）
<html>
<head>
<style type="text/css">.thumb-imagefloat:left;width:100px;position:relative;padding:5px;.selectedItemborder: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>【讨论】：
谢谢你，它有效，@Mippy，但还有一个问题：当我选择预览并按下删除按钮时，它只删除预览，但不影响所选文件列表，所以当我按上传按钮，它将所有文件加载到服务器。你能帮我解决一下吗？ @OlegShankovskyi，你可以做更多的谷歌来找到这个问题的答案，无论如何请检查这个Clearing <input type='file' /> using jQuery。以上是关于在 Spring MVC 中使用 JavaScript 上传图像以进行预览的主要内容，如果未能解决你的问题，请参考以下文章
如何在带有注解配置的spring mvc中使用spring数据
使用 jQuery $.ajax 进行 ASP.NET MVC 验证