图片上传同步效果图js
This commit is contained in:
dy
parent
62144b017f
commit
5122c416a2
|
|
@ -4,16 +4,16 @@
|
||||||
<th:block th:include="include :: header('创建活动')"/>
|
<th:block th:include="include :: header('创建活动')"/>
|
||||||
<th:block th:include="include :: datetimepicker-css"/>
|
<th:block th:include="include :: datetimepicker-css"/>
|
||||||
<th:block th:include="include :: jquery-smartwizard-css"/>
|
<th:block th:include="include :: jquery-smartwizard-css"/>
|
||||||
|
<th:block th:include="include :: jasny-bootstrap-css" />
|
||||||
</head>
|
</head>
|
||||||
<style type='text/css'>
|
<style type='text/css'>
|
||||||
.rightarea
|
.rightarea {
|
||||||
{
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
.leftarea
|
|
||||||
{
|
.leftarea {
|
||||||
float: left;
|
float: left;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
|
|
@ -174,7 +174,8 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="col-sm-4 control-label is-required">活动标题：</label>
|
<label class="col-sm-4 control-label is-required">活动标题：</label>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<input id="drawname" name="DRAWNAME" placeholder="活动名称" class="form-control" type="text"
|
<input id="drawname" name="DRAWNAME" placeholder="活动名称"
|
||||||
|
class="form-control" type="text"
|
||||||
maxlength="30" onkeyup="updatePic(this)">
|
maxlength="30" onkeyup="updatePic(this)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -185,21 +186,27 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="col-sm-4 control-label is-required">活动描述：</label>
|
<label class="col-sm-4 control-label is-required">活动描述：</label>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<input id="drawDescribe" name="drawDescribe" placeholder="活动描述" class="form-control" type="text"
|
<input id="drawDescribe" name="drawDescribe" placeholder="活动描述"
|
||||||
|
class="form-control" type="text"
|
||||||
maxlength="30" onkeyup="updatePic(this)">
|
maxlength="30" onkeyup="updatePic(this)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-sm-6">
|
<div class="col-sm-6">
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-sm-4 control-label is-required">背景图片：</label>
|
<label class="col-sm-4 control-label is-required">背景图片：</label>
|
||||||
<div class="col-sm-8">
|
|
||||||
<input id="pic" name="pic" placeholder="背景图片" class="form-control" type="text"
|
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||||
maxlength="30">
|
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
|
||||||
|
<div>
|
||||||
|
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
|
||||||
|
<input type="file" id="pic"></span>
|
||||||
|
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -207,7 +214,8 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="col-sm-4 control-label is-required">自定义按钮1：</label>
|
<label class="col-sm-4 control-label is-required">自定义按钮1：</label>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<input id="btn1" name="btn1" placeholder="自定义按钮1" class="form-control" type="text"
|
<input id="btn1" name="btn1" placeholder="自定义按钮1" class="form-control"
|
||||||
|
type="text"
|
||||||
maxlength="30" onkeyup="updatePic(this)">
|
maxlength="30" onkeyup="updatePic(this)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -218,7 +226,8 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="col-sm-4 control-label is-required">按钮1跳转链接：</label>
|
<label class="col-sm-4 control-label is-required">按钮1跳转链接：</label>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<input name="btn1Link" placeholder="按钮1跳转链接" class="form-control" type="text"
|
<input name="btn1Link" placeholder="按钮1跳转链接" class="form-control"
|
||||||
|
type="text"
|
||||||
maxlength="30">
|
maxlength="30">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -240,7 +249,8 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="col-sm-4 control-label is-required">按钮2跳转链接：</label>
|
<label class="col-sm-4 control-label is-required">按钮2跳转链接：</label>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<input name="btn2Link" placeholder="按钮2跳转链接" class="form-control" type="text"
|
<input name="btn2Link" placeholder="按钮2跳转链接" class="form-control"
|
||||||
|
type="text"
|
||||||
maxlength="30">
|
maxlength="30">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -250,10 +260,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="rightarea">
|
<div class="rightarea">
|
||||||
<h4 class="form-header h4">效果图</h4>
|
<h4 class="form-header h4">效果图</h4>
|
||||||
<div style="position: relative;">
|
<div style="position: relative;text-align:center">
|
||||||
<img src="../../img/1.jpg" width="380" height="500">
|
<img id="imgPic" src="../../img/1.jpg" width="380" height="500">
|
||||||
<span class="drawNamePic" id="drawnamePic" >活动标题</span>
|
<span class="drawNamePic" id="drawnamePic">活动标题</span>
|
||||||
<span class="drawDescribePic" id="drawDescribePic" >活动描述</span>
|
<span class="drawDescribePic" id="drawDescribePic">活动描述</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -383,6 +393,7 @@
|
||||||
<th:block th:include="include :: footer"/>
|
<th:block th:include="include :: footer"/>
|
||||||
<th:block th:include="include :: datetimepicker-js"/>
|
<th:block th:include="include :: datetimepicker-js"/>
|
||||||
<th:block th:include="include :: jquery-smartwizard-js"/>
|
<th:block th:include="include :: jquery-smartwizard-js"/>
|
||||||
|
<th:block th:include="include :: jasny-bootstrap-js" />
|
||||||
<script th:inline="javascript">
|
<script th:inline="javascript">
|
||||||
var prefix = ctx + "activity/info"
|
var prefix = ctx + "activity/info"
|
||||||
|
|
||||||
|
|
@ -614,6 +625,44 @@
|
||||||
var value = val.value;
|
var value = val.value;
|
||||||
$("#"+id+"Pic").text(value);
|
$("#"+id+"Pic").text(value);
|
||||||
}
|
}
|
||||||
|
$("#pic").change(function (){
|
||||||
|
previewURL(this);
|
||||||
|
if($(this).val()!='') {
|
||||||
|
// var formData = new FormData();
|
||||||
|
// formData.append('file', $(this)[0].files[0]);
|
||||||
|
// $.ajax({
|
||||||
|
// url: '/path/to/upload',
|
||||||
|
// type: 'POST',
|
||||||
|
// data: formData,
|
||||||
|
// async: false,
|
||||||
|
// success: function (r) {
|
||||||
|
// if(r.success) {
|
||||||
|
// //success work
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// cache: false,
|
||||||
|
// contentType: false,
|
||||||
|
// processData: false
|
||||||
|
// });
|
||||||
|
$("#imgPic").attr("src",$(this).val());
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function previewURL(input) {
|
||||||
|
if (input.files && input.files[0]) {
|
||||||
|
var reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = function (e) {
|
||||||
|
//$('#prevImg').attr('src', e.target.result);
|
||||||
|
$("#imgPic").attr("src",e.target.result);
|
||||||
|
//$('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat");
|
||||||
|
}
|
||||||
|
|
||||||
|
reader.readAsDataURL(input.files[0]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue