<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
<%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
<%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt” %>
<style>
* {
margin: 0;
padding: 0;
}
/*图片上传*/
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
overflow: auto;
clear: both;
}
.z_photo img {
width: 1rem;
height: 1rem;
}
.z_addImg {
float: left;
margin-right: 0.2rem;
}
.z_file {
background: url(../../img/z_add.png) no-repeat;
width: 1rem;
height: 1rem;
background-size: 100% 100%;
float: left;
margin-right: 0.2rem;
}
.z_file input::-webkit-file-upload-button {
width: 1rem;
height: 1rem;
border: none;
position: absolute;
outline: 0;
opacity: 0;
}
.z_file input#file {
display: block;
width: auto;
border: 0;
vertical-align: middle;
}
/*遮罩层*/
.z_mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
position: fixed;
top: 0;
left: 0;
z-index: 999;
display: none;
}
.z_alert {
width: 3rem;
height: 2rem;
border-radius: .2rem;
background: #fff;
font-size: .24rem;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -1.5rem;
margin-top: -2rem;
}
.z_alert p:nth-child(1) {
line-height: 1.5rem;
}
.z_alert p:nth-child(2) span {
display: inline-block;
width: 49%;
height: .5rem;
line-height: .5rem;
float: left;
border-top: 1px solid #ddd;
}
.z_cancel {
border-right: 1px solid #ddd;
}
.z_cancel {
border-right: 1px solid #ddd;
}
</style>
-
</li> <li> <div class="detail_div"> <label>上传描述图片</label> <!-- 照片添加 --> <div class="z_photo"> <div class="z_file"> <input type="file" name="file" id="fileNew" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file');"/> </div> <c:forEach items="${list}" var="o" varStatus="m"> <div id="${m.index}" class="z_addImg"> <div class="z_sure" onclick="imgRemove('${m.index}','${o.imgUrl}')" style=" float: right; color: red;cursor: pointer "><i class="iconfont">x</i></div> <img src="${o.imgUrl}"></div> </c:forEach> </div> </li> <li style="border-bottom: 0px"> <div class="detail_div"> <label>上传商品头图</label> <button onclick="clickFile()" type="button" style="border: none;background-color: #589cf6; color: #FFFFFF; padding: 10px 15px; font-size: 15px; border-radius: 5px; cursor: pointer;" class=" borderRadius3">上传图片</button> <input type="file" style="display:none" name="file" id="file" onchange="fileImport();"> </div> </li> <li> <div class="detail_div"> <img id="img" style="height: 50%;width: 50%" src="="> </div> </li> </ul> <input type="hidden" value="${shopping.id}" name="" id="shopId"> <input type="hidden" value="${shopping.imgurl}" name="" id="filePath"> <input type="hidden" value="${filesUrl}" name="" id="describePath"> <input type="hidden" value="${filesSize}" name="" id="listSize"> <div class="edit_div"> <button type="button" class="edit_btn borderRadius3 ruizi" style="margin-top: 25%;" onclick="sumbit ()">保存 </button> </div> </div>
js
<script type="text/javascript">
function sumbit() {
var shopId = document.getElementById("shopId").value;
var commodity = document.getElementById("commodity").value;
var price = document.getElementById("price").value;
// var shopDescribe = document.getElementById("shopDescribe").value;
var filePath = document.getElementById("filePath").value
var describePath = document.getElementById("describePath").value
$.ajax({
url: '${pageContext.request.contextPath}/manage/updateShopping.json',
data: {
"id": shopId,
"commodity": commodity,
"price": price,
// "shopDescribe": shopDescribe,
"filePath": filePath,
"describePath": describePath,
},
dataType: "json",
success: function (data) {
if (data.msg == '0') {
window.location.href = "${pageContext.request.contextPath}/manage/shoppingList.json"
} else {
alert(data.msg);
}
},
error: function () {
alert("提交失败!")
}
});
}
function clickFile() {
document.getElementById("file").click();
}
function fileImport() {
//获取读取我文件的File对象
var file = document.getElementById('file').files[0];
if (file == undefined) {
return;
}
var name = file.name; //读取选中文件的文件名
var filechk = file.name.substring(file.name.lastIndexOf('.') + 1);
if ((filechk == 'jpg') || (filechk == 'jpeg') || (filechk == 'png')) {
$.ajaxFileUpload({
url: '${pageContext.request.contextPath}/manage/uploadImg.json',
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: 'file', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data) {
if (data.msg != '0') {
document.getElementById("filePath").value = data.msg;
document.getElementById("img").src = data.msg;
document.getElementById("img").style.width = "50%";
document.getElementById("img").style.height = "50%";
document.getElementById("file").value = "";
} else {
alert("上传失败");
}
},
error: function () {
cancel_shield()
alert("提交失败,请认真核对格式是否正确!")
}
})
return false;
} else {
alert('请选择图片文件');
}
}
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 640) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
function imgChange(obj1, obj2) {
//获取点击的文本框
var listIndex = document.getElementById("listSize").value;
alert(listIndex)
var formData = new FormData();
var file = document.getElementById("fileNew");
//存放图片的父级元素
var imgContainer = document.getElementsByClassName(obj1)[0];
//获取的图片文件
var fileList = file.files;
//文本框的父级元素
var input = document.getElementsByClassName(obj2)[0];
var imgArr = [];
//遍历获取到得图片文件
for (var i = 0; i < fileList.length; i++) {
var imgUrl = window.URL.createObjectURL(file.files[i]);
imgArr.push(imgUrl);
var img = document.createElement("img");
img.setAttribute("src", imgArr[i]);
var imgAdd = document.createElement("div");
imgAdd.setAttribute("class", "z_addImg");
imgAdd.appendChild(img);
imgContainer.appendChild(imgAdd);
var body = document.getElementsByClassName('z_addImg')[listIndex]
body.id = ''+listIndex
document.getElementById("listSize").value = Number(listIndex) +1;
formData.append("file", fileList[i]);
$.ajax({
type: "post",
url: "${pageContext.request.contextPath}/manage/uploadFilesImg.json",
data: formData,
processData: false,
contentType: false,
success: function (data) {
var f = document.getElementById("describePath").value
document.getElementById("describePath").value = f + "@" + data.msg;
var modelStr = "<div class='z_sure' οnclick='imgRemoveAdd("+listIndex+")'style=' float: right; color: red;cursor: pointer '><i class='iconfont'>x</i></div>";
modelStr =modelStr +"<input id='asd"+listIndex+"' type='hidden' value='"+ data.msg+"' ></input>";
$("div[class=z_addImg]:last").append(modelStr);
},
error: function (e) {
}
});
};
};
function imgRemove(id, url) {
var listIndex1 = document.getElementById("listSize").value ;
document.getElementById("listSize").value = Number(listIndex1) -1;
document.getElementById(id).remove();
var path = document.getElementById("describePath").value
var newstr = path.replace("@" + url, "");
document.getElementById("describePath").value = newstr;
};
function imgRemoveAdd(id) {
var listIndex1 = document.getElementById("listSize").value ;
var urlUp = document.getElementById("asd"+id).value;
var path = document.getElementById("describePath").value
var newstr = path.replace("@" + urlUp, "");
document.getElementById("describePath").value = newstr;
document.getElementById(id).remove();
document.getElementById("listSize").value = Number(listIndex1) -1;
};
</script>