图片上传同步效果图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 :: datetimepicker-css"/>
|
||||
<th:block th:include="include :: jquery-smartwizard-css"/>
|
||||
<th:block th:include="include :: jasny-bootstrap-css" />
|
||||
</head>
|
||||
<style type='text/css'>
|
||||
.rightarea
|
||||
{
|
||||
.rightarea {
|
||||
float: left;
|
||||
width: 40%;
|
||||
height: 300px;
|
||||
}
|
||||
.leftarea
|
||||
{
|
||||
|
||||
.leftarea {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 300px;
|
||||
|
|
@ -166,98 +166,108 @@
|
|||
</div>
|
||||
<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
|
||||
<div style="height: 610px">
|
||||
<form class="form form-horizontal m-t">
|
||||
<div class="leftarea">
|
||||
<h4 class="form-header h4">第3步-配置展现内容</h4>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">活动标题：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="drawname" name="DRAWNAME" placeholder="活动名称" class="form-control" type="text"
|
||||
maxlength="30" onkeyup="updatePic(this)">
|
||||
<form class="form form-horizontal m-t">
|
||||
<div class="leftarea">
|
||||
<h4 class="form-header h4">第3步-配置展现内容</h4>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">活动标题：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="drawname" name="DRAWNAME" placeholder="活动名称"
|
||||
class="form-control" type="text"
|
||||
maxlength="30" onkeyup="updatePic(this)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">活动描述：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="drawDescribe" name="drawDescribe" placeholder="活动描述" class="form-control" type="text"
|
||||
maxlength="30" onkeyup="updatePic(this)">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">活动描述：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="drawDescribe" name="drawDescribe" placeholder="活动描述"
|
||||
class="form-control" type="text"
|
||||
maxlength="30" onkeyup="updatePic(this)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-6">
|
||||
<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"
|
||||
maxlength="30">
|
||||
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<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 class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">自定义按钮1：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="btn1" name="btn1" placeholder="自定义按钮1" class="form-control"
|
||||
type="text"
|
||||
maxlength="30" onkeyup="updatePic(this)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">自定义按钮1：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="btn1" name="btn1" placeholder="自定义按钮1" class="form-control" type="text"
|
||||
maxlength="30" onkeyup="updatePic(this)">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">按钮1跳转链接：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="btn1Link" placeholder="按钮1跳转链接" class="form-control"
|
||||
type="text"
|
||||
maxlength="30">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">按钮1跳转链接：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="btn1Link" placeholder="按钮1跳转链接" class="form-control" type="text"
|
||||
maxlength="30">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">自定义按钮2：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="btn2" placeholder="自定义按钮2" class="form-control" type="text"
|
||||
maxlength="30" onkeyup="updatePic(this)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">自定义按钮2：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="btn2" placeholder="自定义按钮2" class="form-control" type="text"
|
||||
maxlength="30" onkeyup="updatePic(this)">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">按钮2跳转链接：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="btn2Link" placeholder="按钮2跳转链接" class="form-control"
|
||||
type="text"
|
||||
maxlength="30">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label is-required">按钮2跳转链接：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="btn2Link" placeholder="按钮2跳转链接" class="form-control" type="text"
|
||||
maxlength="30">
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightarea">
|
||||
<h4 class="form-header h4">效果图</h4>
|
||||
<div style="position: relative;text-align:center">
|
||||
<img id="imgPic" src="../../img/1.jpg" width="380" height="500">
|
||||
<span class="drawNamePic" id="drawnamePic">活动标题</span>
|
||||
<span class="drawDescribePic" id="drawDescribePic">活动描述</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="rightarea">
|
||||
<h4 class="form-header h4">效果图</h4>
|
||||
<div style="position: relative;">
|
||||
<img src="../../img/1.jpg" width="380" height="500">
|
||||
<span class="drawNamePic" id="drawnamePic" >活动标题</span>
|
||||
<span class="drawDescribePic" id="drawDescribePic" >活动描述</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
|
||||
|
|
@ -383,6 +393,7 @@
|
|||
<th:block th:include="include :: footer"/>
|
||||
<th:block th:include="include :: datetimepicker-js"/>
|
||||
<th:block th:include="include :: jquery-smartwizard-js"/>
|
||||
<th:block th:include="include :: jasny-bootstrap-js" />
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "activity/info"
|
||||
|
||||
|
|
@ -614,6 +625,44 @@
|
|||
var value = val.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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue