Skip to content

T
tl_estate
Commit 2de557c0 authored by agping's avatar agping
Browse files
Options

收款记录上传图片修改

parent 8b143d8d
Hide whitespace changes
Inline Side-by-side
Showing with 122 additions and 119 deletions
application/index/view/collection/getCollection.html
View file @ 2de557c0
...@@ -127,6 +127,53 @@ ...@@ -127,6 +127,53 @@
.delet-pic-btn{ .delet-pic-btn{
color:red; color:red;
} }
/*css样式*/
.img-cont{
width:1000px;
height:570px;
border:2px solid #317ef3;
margin:50px auto;
}
.img-cont>div{
width:300px;
height:260px;
border:1px solid #777;
float:left;
margin:20px 0 0 20px;
}
.img-cont>div>div{
width:300px;
height:220px;
border:1px solid red;
}
.img-cont>div>a{
width:60px;
height:30px;
border-radius:4px;
line-height: 30px;
text-align: center;
color:#fff;
display: block;
background: #317ef3;
margin:5px 0 0 0px;
cursor: pointer;
}
.hide{
display: none !important;
}
.result{
width: 600px;
}
.result>img{
width: 200px;
height: 200px;
}
/*css样式*/
</style> </style>
<div id="page-content-wrapper"> <div id="page-content-wrapper">
<div class="container"> <div class="container">
...@@ -258,10 +305,11 @@ ...@@ -258,10 +305,11 @@
<li class="list-group-item"> <li class="list-group-item">
<div class="form-group full-width-100 full-pic-area"> <div class="form-group full-width-100 full-pic-area">
<!--<label for="">详情页轮播图(至少4张)</label>--> <!--input上传图片-->
<input readonly="readonly" type="text" name="xiangqing_pic_input" class="form-control" style="display: none" id="xiangqing_pic_input" placeholder="请选择图片"> <div id="container_body">
<button class="btn btn-default upload-image-btn" id="xiangqing_pic_btn" type="button" data-limittop="20">上传图片</button> <label>请选择一个图像文件：</label>
<span class="tip"></span> <input type="file" id="file_input" multiple/>
</div>
</div> </div>
<ul class="img-pre-ul" id="xiangqing_pic_ul"> <ul class="img-pre-ul" id="xiangqing_pic_ul">
</ul> </ul>
......
public/resource/js/getCollection.js
View file @ 2de557c0
...@@ -20,8 +20,41 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css ...@@ -20,8 +20,41 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css
}, },
event: function() { event: function() {
var _doc = $(document); var _doc = $(document);
var _imgMaskObj = $('#img_mask_area'); //预览大图的mask // 收款图片上传多张图片
var _imgUploadLunbo = $('#xiangqing_pic_ul'); //详情页轮播图ul // window.onload = function(){
// var input = document.getElementById("file_input");
// var result,div;
//
// if(typeof FileReader==='undefined'){
// result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
// input.setAttribute('disabled','disabled');
// }else{
// input.addEventListener('change',readFile,false);
// }
// function readFile(){
// for(var i=0;i<this.files.length;i++){
// if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式
// return alert("上传的图片格式不正确，请重新选择")
// 　　　　}
// var reader = new FileReader();
// reader.readAsDataURL(this.files[i]);
// reader.onload = function(e){
// result = '<div id="result"><img src="'+this.result+'" alt=""/></div>';
// div = document.createElement('div');
// div.innerHTML = result;
// document.getElementById('body').appendChild(div); 　　//插入dom树 <br>　　　　　　　　　　}
// }
// }
// };
// $('.span-del').click(function(){
// console.log(55);
// $(this).parent().remove();
// });
_doc.on('click', '.span-del', function(e){
e.preventDefault();
e.stopPropagation();
$(this).parent().remove();
});
_doc.on('click', 'a[href="#modal-time"]', function(e){ _doc.on('click', 'a[href="#modal-time"]', function(e){
follow.house_id = $ (this).attr ("data-id"); follow.house_id = $ (this).attr ("data-id");
e.preventDefault(); e.preventDefault();
...@@ -32,14 +65,10 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css ...@@ -32,14 +65,10 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css
$("#search").click(function() { $("#search").click(function() {
follow.getList(1); follow.getList(1);
}); });
//点击收款图片 2.2版本 //点击收款图片 2.2版本
// $(".add-pic").click(function() { // $(".add-pic").click(function() {
// //监听图片上传
// follow.getaddPicList(); // follow.getaddPicList();
// }); // });
_doc.on('click', '.add-pic', function(){ _doc.on('click', '.add-pic', function(){
...@@ -72,88 +101,7 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css ...@@ -72,88 +101,7 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css
$ (document).delegate (".addphone2", "click", function () {//list2消失 $ (document).delegate (".addphone2", "click", function () {//list2消失
follow.addphone2(this); follow.addphone2(this);
}); });
//图片上传 2.2版本
//图片上传，附件上传处理事件
$(".upload-image-btn").click(function() {
var _this = $(this),
_spFile = _this.data('spfile'),
_limitTop = _this.data('limittop'),
_fileNum = _this.parent().next().find('.delet-pic-btn').length; //根据删除按钮的个数，确定文件的个数
if(_limitTop && (_fileNum < _limitTop)) {
BrowseServer(_this.prev().attr('id'), function(url) {
console.log(url);
if(_spFile == 'pdf') {
if(/(\.pdf)$/i.test(url)) {
_this.parent().next().prepend('<li class="pdf-pre-li"><a class="pdf-pre-a" href="{0}" target="_blank" title="点击查看">{1}</a><a href="javascript:;" class="delet-pic-btn">删除</a></li>'.stringFormatObj({
'0': url,
'1': dealFileName(decodeURI(url.slice(url.lastIndexOf('/') + 1)))
}));
} else {
alert('所选择的格式不是pdf,请重新选择');
return false;
}
} else {
if(/(\.jpg|\.jpeg|\.png|\.gif|\.bmp)$/i.test(url)) {
_this.parent().next().prepend('<li><img title="点击查看大图" src="{0}" /><a href="javascript:;" class="delet-pic-btn">删除</a></li>'.stringFormatObj({
'0': url
}));
} else {
alert('所选择的格式不正确,请重新选择');
return false;
}
};
});
} else {
alert('上传上限为 ' + _limitTop);
return false;
};
});
//图片上传删除键事件
_doc.on('click', '.delet-pic-btn', function(e) {
var _this = $(this);
e.preventDefault();
e.stopPropagation();
if(confirm('确定删除该文件吗？')){
var _imgId = _this.parent().attr('data-imgid');
if(_imgId){
$.ajax({
type: 'POST',
url: '/index/delHouseFile',
data: {
'id': _imgId,
'house_id': 3104,
},
timeout: 30000,
dataType: 'json',
beforeSend: function() {},
success: function(_data) {
if(typeof _data === 'object') {
if(_data['code'] == '200') {
_this.parent().remove();
} else {
alert(_data['msg']);
}
} else {
alert('数据错误');
};
},
error: function() {
alert('enter error');
},
complete: function(xhr, textStatus){
if(textStatus === 'timeout') {
//处理超时的逻辑
alert('请求超时,请重试');
};
}
});
}else{
_this.parent().remove();
}
};
});
//图片预览点击放大事件 //图片预览点击放大事件
_doc.on('click', '.img-pre-ul>li>img', function(e) { _doc.on('click', '.img-pre-ul>li>img', function(e) {
_imgMaskObj.show().find('img').attr('src', this.src); _imgMaskObj.show().find('img').attr('src', this.src);
...@@ -255,33 +203,40 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css ...@@ -255,33 +203,40 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css
}); });
}, },
//点击收款图片 调用的接口 //点击收款图片 调用的接口
getaddPicList: function() { //提交 getaddPicList: function() {
var _imgUploadLunbo = $('#xiangqing_pic_ul'); //详情页轮播图ul var image_file;
var _urlCut = location.origin + '/resource/lib/Attachments/images/';//要截取的部分url var input = document.getElementById("file_input");
_imgUploadLunbo.empty(); var result,div;
$.ajax({ if(typeof FileReader==='undefined'){
'type': 'GET', result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
'url': '/index/houseEdit', input.setAttribute('disabled','disabled');
data: { }else{
"id": 3104, input.addEventListener('change',readFile,false);
}, };
dataType: "json", function readFile(){
success: function(data) { console.log(this.files);
if(data.code == 200) { image_file=this.files
var _data = data['data']; for(var i=0;i<this.files.length;i++){
for(var i in _data['slide_show']) { if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式
_imgUploadLunbo.append('<li data-imgid="{id}"><img title="点击查看大图" src="{0}" /><a href="javascript:;" class="delet-pic-btn">删除</a></li>'.stringFormatObj({ return alert("上传的图片格式不正确，请重新选择")
'0': _urlCut + _data['slide_show'][i]['img_name'], 　　　　}
'id': _data['slide_show'][i]['id'] var reader = new FileReader();
})); reader.readAsDataURL(this.files[i]);
}; reader.onload = function(e){
result = '<div class="result"><img src="'+this.result+'" alt=""/> <span class="span-del">删除</span></div>';
// follow.getList(0); div = document.createElement('div');
} else { div.innerHTML = result;
} document.getElementById('container_body').appendChild(div);　　
} 　}
}); }
};
console.log(image_file);
}, },
//删除图片
// 导出列表 // 导出列表
exportList: function(pageNo) { exportList: function(pageNo) {
console.log(2); console.log(2);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment