<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<th:block th:include="include :: header('修改轮播图')"/>
|
<style>
|
img {
|
width: 150px;
|
}
|
</style>
|
</head>
|
<body class="white-bg">
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
<form class="form-horizontal m" id="form-SlideshowPic-edit" th:object="${slideshowPic}">
|
<input name="slideshowPicId" th:field="*{slideshowPicId}" type="hidden">
|
<div class="form-group">
|
<label class="col-sm-3 control-label is-required">轮播图描述：</label>
|
<div class="col-sm-8">
|
<input name="slideshowDescribe" th:field="*{slideshowDescribe}" class="form-control" type="text"
|
required>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-3 control-label is-required">轮播图：</label>
|
<div class="col-sm-8">
|
<div class="file-loading">
|
<div id="img-div"></div>
|
<input type="file" name="file" id="slidePic" onChange="preview(this)"/>
|
</div>
|
<div style="margin-top: 10px">
|
<i><b>提示：</b>只允许上传一张图片；上传图片大小为718*308，可以同比例增大。</i>
|
</div>
|
</div>
|
</div>
|
<input name="picUrl" id="picUrl" th:field="*{picUrl}" class="form-control" type="hidden">
|
</form>
|
</div>
|
<th:block th:include="include :: footer"/>
|
<script type="text/javascript">
|
//图片预览及上传
|
var imgDiv = document.getElementById("img-div");
|
var previewImg = document.createElement("img");
|
previewImg.src = $("#picUrl").val();
|
imgDiv.appendChild(previewImg);
|
|
function preview(obj) {
|
var file = document.getElementById('slidePic').value; //获取文件
|
var index = file.lastIndexOf('.'); //获取最后一位小数点
|
var extension = file.substr(index + 1);
|
var arr = ['jpeg', 'png', 'jpg', 'gif'];
|
if (isInArray(arr, extension)) {
|
while (imgDiv.hasChildNodes()) {
|
imgDiv.removeChild(imgDiv.firstChild);
|
}
|
var img = document.createElement("img");
|
img.src = window.URL.createObjectURL(obj.files[0]);
|
imgDiv.appendChild(img);
|
var file = obj.files[0];
|
UpladFile(file);
|
} else {
|
alert('请选择正确的图片格式');
|
return false;
|
}
|
}
|
|
//上传文件方法
|
function UpladFile(fileObj) {
|
var form = new FormData(); // FormData 对象
|
form.append("file", fileObj); // 文件对象
|
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
|
xhr.open("post", "/common/defUpload", true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
|
xhr.send(form); //开始上传，发送form数据
|
xhr.onreadystatechange = function () {
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
var data = xhr.responseText;
|
data = JSON.parse(data);
|
$("#picUrl").val(data.url)
|
}
|
}
|
}
|
|
/**
|
* 使用循环的方式判断一个元素是否存在于一个数组中
|
* @param {Object} arr 数组
|
* @param {Object} value 元素值
|
*/
|
function isInArray(arr, value) {
|
for (var i = 0; i < arr.length; i++) {
|
if (value === arr[i]) {
|
return true;
|
}
|
}
|
return false;
|
}
|
|
|
var prefix = ctx + "tr/slideshowPic";
|
$("#form-SlideshowPic-edit").validate({
|
focusCleanup: true
|
});
|
|
function submitHandler() {
|
if ($.validate.form()) {
|
$.operate.save(prefix + "/edit", $('#form-SlideshowPic-edit').serialize());
|
}
|
}
|
</script>
|
</body>
|
</html>
|
