这个组件我是参考的https://blog.csdn.net/royal1235/article/details/83717930#commentsedit
他的博客，但是后期又出现了一点问题，我跟原博主说了，他更改了他的代码，我也把我的放出来（调皮）
<!-- 添加图片弹窗 -->
<div id="add-photos-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save',resizable:true,modal:true" style="width:600px;height:450px; padding:10px;">
<div id="Pic_pass"> <!-- 添加图片 -->
<p style="font-size: 20px;font-weight: bold;">请上传多张照片 </p>
<div class="picDiv">
<div class="addImages">
<input type="file" class="file" id="uploadFilexxx" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
<div class="text-detail">
<span>+</span>
<p>添加图片</p>
</div>
</div>
<button type="button" id="bbt">上传</button>
</div>
</div>
<div class="msg" style="display: none;"></div>
</div>
<!-- 显示图片弹窗 -->
<div id="list-photos-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save',resizable:true,modal:true" style="width:600px;height:450px; padding:10px;">
<div class="photos">
<div class="picDiv1">
</div>
</div>
</div>js代码：
//图片上传预览功能
var userAgent = navigator.userAgent; //用于判断浏览器类型
//使用formData完成多图片上传
var formData = new FormData();
var list=new Array();
$(".file").change(function() {
//获取选择图片的对象
var docObj = $(this)[0];
var picDiv = $(this).parents(".picDiv");
//得到所有的图片文件
var fileList = docObj.files;
//将图片数据放到formData中传递后台
if(docObj.files.length==1){
formData.append("file",docObj.files[0]);
console.log("一次拉进来了一张图片");
}else{
for(var i=0; i<docObj.files.length;i++){
formData.append("file",docObj.files[i]);
console.log("你这一次拉进来好几张图片呢");
}
}
//循环遍历
for (var i = 0; i < fileList.length; i++) {
//动态添加html元素
var picHtml = "<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><a class='delbtn'id='"+docObj.files[i].name+"'>删除</a></div></div>";
picDiv.prepend(picHtml);
//获取图片imgi的对象
var imgObjPreview = document.getElementById("img" + fileList[i].name);
if (fileList && fileList[i]) {
//图片属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '160px';
imgObjPreview.style.height = '130px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
if (userAgent.indexOf('MSIE') == -1) {
//IE以外浏览器
imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
console.log(imgObjPreview.src);
// var msgHtml = '<input type="file" id="fileInput" multiple/>';
} else {
//IE浏览器
if (docObj.value.indexOf(",") != -1) {
var srcArr = docObj.value.split(",");
imgObjPreview.src = srcArr[i];
} else {
imgObjPreview.src = docObj.value;
}
}
}
}
/*删除功能*/
$(".delbtn").click(function(e) {
formData = new FormData();
var _this = $(this);
_this.parents(".imageDiv").remove();
var name=$(this).attr('id');
list.push(name);
if(docObj.files.length==1){
if(docObj.files[0].name!=name){
formData.append("file",docObj.files[0]);
console.log(docObj.files[0].name);
}
}else{
for( i=0; i<docObj.files.length;i++){
var flag=true;
for( j=0;j<list.length;j++){
var name=list[j];
if(docObj.files[i].name==name){
flag=false;
}
}
if(flag){
formData.append("file",docObj.files[i]);
}
}
}
});
});
$("#bbt").click(function(){
var item = $('#data-datagrid').datagrid('getSelected');//获取选中的这条信息的id
formData.append("zid", item.id);
$.ajax({
type:'post',
dataType:'json',
data:formData,
cache: false, //上传文件不需要缓存
url:'upload_photo',
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success:function(data){
if(data.type=='success'){
$.messager.alert('提示', '图片上传成功！');
$('#add-photos-dialog').dialog('close');
}else{
$.messager.alert('提示', data.msg);
}
}
})
})
//打开图片选择框
function addphotos(lunWenId){
$('#add-photos-dialog').dialog({
closed: false,
modal:true,
title: "添加图片",
buttons: [ {
text: '关闭',
iconCls: 'icon-cancel',
handler: function () {
$('#add-photos-dialog').dialog('close');
}
}],
onClose :function (){
$('#data-datagrid').datagrid('clearSelections');
$(".imageDiv").remove();
formData = new FormData();
list=new Array();
}
});
}
//打开查看修改图片
function listphotos(lunWenId){
$('#list-photos-dialog').dialog({
closed: false,
modal:true,
title: "查看删除图片",
buttons: [ {
text: '关闭',
iconCls: 'icon-cancel',
handler: function () {
$('#list-photos-dialog').dialog('close');
}
}],
onBeforeOpen:function(){
$.ajax({
url: 'photoPathList',
type: 'post',
dataType: 'json',
data : {
"zid":lunWenId,
},
success:function(data){
if(data.type == 'success'){
//加载图片
for (var i = 0; i < data.filelists.length; i++) {
//动态添加html元素
var pathphoto=data.filelists[i];
var picHtml ="<div class='imageDiv1' > <img id='"+pathphoto+"' class='layui-upload-img'onclick='previewImg(this)' layer-src='../../resources/lunwen/"+pathphoto+"' src='../../resources/lunwen/"+pathphoto+"' /> <div> <input type='button' value='删除' onclick=deletephoto('"+pathphoto+"','"+lunWenId+"')></div></div>";
$('.picDiv1').append(picHtml);
//获取图片imgi的对象
}
}else{
$.messager.alert('信息提示',data.msg,'warning');
$('#list-photos-dialog').dialog('close');
}
}
})
},
onClose :function (){
$('#data-datagrid').datagrid('clearSelections');
$('.picDiv1').html("");
}
});
}
function deletephoto(path,zid){
$.ajax({
url: 'deletePhotoPath',
type: 'post',
dataType: 'json',
data : {
"photoPath":path,
"zid":zid,
},
success:function(data){
if(data.type == 'success'){
$('#list-photos-dialog').dialog('close');
listphotos(zid);
}else{
$.messager.alert('信息提示',data.msg,'warning');
}
}
})
}后台获取图片信息并存储路径到数据库和图片存入本地磁盘代码：
/**
* 上传图片 MultipartFile用来接受前台传过来的文件
* @param photo
* @param request
* @return
*/
@RequestMapping(value="/upload_photo",method=RequestMethod.POST)
@ResponseBody
public Map<String, String> uploadPhotos(@RequestParam("file")MultipartFile[] files,
@RequestParam(name="zid",required=false)Long zid,
HttpServletRequest request){
Map<String, String> ret = new HashMap<String, String>();
Map<String, Object> queryMap = new HashMap<String, Object>();
String photosPathAll="";
queryMap.put("zid", zid);
if(files == null||files.length <= 0){
ret.put("type", "error");
ret.put("msg", "选择要上传的文件！");
return ret;
}
//判断图片格式
for(int i = 0;i<files.length;i++){
System.out.println(files[i].getOriginalFilename());
String suffix = files[i].getOriginalFilename().substring(files[i].getOriginalFilename().lastIndexOf(".")+1,files[i].getOriginalFilename().length());
if(!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())){
ret.put("type", "error");
ret.put("msg", "请选择jpg,jpeg,gif,png格式的图片！");
return ret;
}
}
User user=(User)request.getSession().getAttribute("admin");
String path=request.getServletContext().getRealPath("/");
String savePath=path+ "resources/lunwen/"+user.getUsername()+"/";
File savePathFile=new File(savePath);
if(!savePathFile.exists()){
//若不存在改目录，则创建目录
savePathFile.mkdirs();
}
for(int i = 0;i<files.length;i++){
try { //上传一张图片休眠10毫秒
Thread.sleep(10);
} catch (InterruptedException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
if(!files[i].getOriginalFilename().isEmpty()){
String suffix = files[i].getOriginalFilename().substring(files[i].getOriginalFilename().lastIndexOf(".")+1,files[i].getOriginalFilename().length());
String filename = new Date().getTime()+"."+suffix;
try {
//将图片的路径信息写入到指定的TXT中
//将文件保存至指定目录
files[i].transferTo(new File(savePath+filename));
photosPathAll+=user.getUsername()+"/"+filename+"|";
}catch (Exception e) {
// TODO Auto-generated catch block
ret.put("type", "error");
ret.put("msg", "保存文件异常！");
e.printStackTrace();
return ret;
}
}else{
ret.put("type", "error");
ret.put("msg", "文件为空！");
return ret;
}
}
System.out.println(photosPathAll);
queryMap.put("path", photosPathAll);
if(lunWenService.updataPath(queryMap)<=0){
ret.put("type", "error");
ret.put("msg", "图片写入数据库失败！");
return ret;
}
ret.put("type", "success");
ret.put("msg", "图片添加成功！");
return ret;
}哇！！！！！忘了css的代码了这个是添加窗口的css样式
.imageDiv {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px
}
.cover {
position:absolute;
z-index:1;
top:0;
left:0;
width:160px;
height:130px;
background-color:rgba(0,0,0,.3);
display:none;
line-height:125px;
text-align:center;
cursor:pointer;
}
.cover .delbtn {
color:red;
font-size:20px;
}
.imageDiv:hover .cover {
display:block;
}
.addImages {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
overflow:hidden;
margin:10px;
}
.text-detail {
margin-top:40px;
text-align:center;
}
.text-detail span {
font-size:40px;
}
.file {
position:absolute;
top:0;
left:0;
width:160px;
height:130px;
opacity:0;
}
.imageDiv1 {
display:inline-block;
width:160px;
height:130px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:1px dashed darkgray;
background:#f8f8f8;
position:relative;
margin:10px;
}
.imageDiv1 img{
width:160px;
height:130px;
}
.imageDiv1 input{
color: red;
display:block;
margin:0 auto;
}xml的配置文件要加上
<!--配置文件上传解析器，注意，id名称必须是这个，不然可能会出错 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
<property name="defaultEncoding" value="utf-8"></property>
<property name="maxUploadSize" value="1024000"></property>
</bean>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
