(一)单图上传：
步骤：
前台页面
1. 文件样式世界
<div class="layui-input-block">
<img id="imgUrl" src="<%= basePath %>/static/images/uploadfile.png" alt="暂无图片" width="150px" height="100" onclick=”aclick()”/>
<ul>
<li><img></li>
<ul>
</div>
2. 文件选择器
<div id="frmUploadImg" style="display:none">
<input name="APPImage" id="APPImage" type="file" onchange="doUpload()"/>
</div>
3. 点击图片触发文件选择器
$("#imgUrl").click(function () {
//触发文件选择
$("#APPImage").click();
})
//选择好文件之后 进行文件上传。
doUpload(); //方法实现文件上传
ajax({
//实现文件上传
//区别与普通的数据上传，是文件上传
Success: function(data){
//data就是上传成功返回的图片名数组
//前台的回显
}
})
后台实现文件上传的操作
public List<String> uploadFile(HttpServletRequest request,@RequestParam("APPImage") MultipartFile files[]){
(二)多图上传：
步骤：
1 页面布局
<div class="layui-input-block">
<ul id=”uls”><li> <img id="imgUrl" src="<%= basePath %>/static/images/uploadfile.png" alt="暂无图片" width="150px"
height="100" onclick=”aclick()”/>
</li></ul>
</div>
//文件选择器
<div id="frmUploadImg" style="display:none">
<input name="APPImage" id="APPImage" type="file" onchange="doUpload()"/>
</div>
2. 点击图片触发文件选择器
$("#imgUrl").click(function () {
//触发文件选择
$("#APPImage").click();
3．1选择好文件之后 进行文件上传。
doUpload() 方法实现文件上传、
ajax({
//实现文件上传
//区别与普通的数据上传，是文件上传
Success: function(data){
//data就是上传成功返回的图片名数组
4.前台的回显
// 区别与单图上传
单图： $(“#img”).attr(src,”http://…./data”);
多图：
//上传之后的回显不一样
success: function (path) {
//1.遍历上传完成之后的图片地址
for(var i = 0;i<path.length;i++){
//2.
var imgsrc ="http://localhost:8080/sSm/uploadfiles/"+path[i];
$("#imagenews").append("<li class='lis'>" +
" <img src='"+imgsrc+"' fileName='"+path[i]+"' />" +
" <input type='text' name='images.title' placeholder='请输入图片的标题'>" +
" <div class='close'><i>×</i></div>"+
" </li>");
}
3. 后台实现文件上传的操作
public List<String> uploadFile(HttpServletRequest request,@RequestParam("APPImage") MultipartFile files[]){
多图上传 还需要多一些步骤
- 获取到所有的图片名（作为数据库photo的参数值）区别于单图（隐藏的input保存）
通过js 遍历到所有的图片名，通过对象保存
Js方法可以对页面元素进行遍历操作，获取到图片名
$(".lis").each(function(){
//获取图片的路径
var imgsrc =$(this).find("img").attr("filename");
imgsrcs.append(imgsrc+";")
});
- 删除不需要的图片按钮
$(".close").live("click",function(){
$(this).parent(".lis").remove();//只是单纯的删除页面元素
//方案1. 通过Java文件操作删除我们对应的uploadfiles里的图片文件。
//方案2 保留服务器上传的图片，后期统一对图片服务器管理。单独维护文件服务器。
});
适用功能：
商品列表，需要多个图片展示信息的功能
区别： 界面显示不一样
联系：后台上传逻辑都是一样的 ，uolpoadfileController doupload()方法实现单个或多个文件的上传。
