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 @@
.delet-pic-btn{
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>
<div id="page-content-wrapper">
<div class="container">
......@@ -258,10 +305,11 @@
<li class="list-group-item">
<div class="form-group full-width-100 full-pic-area">
<!--<label for="">详情页轮播图(至少4张)</label>-->
<input readonly="readonly" type="text" name="xiangqing_pic_input" class="form-control" style="display: none" id="xiangqing_pic_input" placeholder="请选择图片">
<button class="btn btn-default upload-image-btn" id="xiangqing_pic_btn" type="button" data-limittop="20">上传图片</button>
<span class="tip"></span>
<!--input上传图片-->
<div id="container_body">
<label>请选择一个图像文件：</label>
<input type="file" id="file_input" multiple/>
</div>
</div>
<ul class="img-pre-ul" id="xiangqing_pic_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
},
event: function() {
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){
follow.house_id = $ (this).attr ("data-id");
e.preventDefault();
......@@ -32,14 +65,10 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css
$("#search").click(function() {
follow.getList(1);
});
//点击收款图片 2.2版本
// $(".add-pic").click(function() {
// //监听图片上传
// follow.getaddPicList();
// });
_doc.on('click', '.add-pic', function(){
......@@ -72,88 +101,7 @@ define(['doT', 'text!temp/get_collection_template_tpl.html', 'css!style/home.css
$ (document).delegate (".addphone2", "click", function () {//list2消失
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) {
_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
});
},
//点击收款图片 调用的接口
getaddPicList: function() { //提交
var _imgUploadLunbo = $('#xiangqing_pic_ul'); //详情页轮播图ul
var _urlCut = location.origin + '/resource/lib/Attachments/images/';//要截取的部分url
_imgUploadLunbo.empty();
$.ajax({
'type': 'GET',
'url': '/index/houseEdit',
data: {
"id": 3104,
},
dataType: "json",
success: function(data) {
if(data.code == 200) {
var _data = data['data'];
for(var i in _data['slide_show']) {
_imgUploadLunbo.append('<li data-imgid="{id}"><img title="点击查看大图" src="{0}" /><a href="javascript:;" class="delet-pic-btn">删除</a></li>'.stringFormatObj({
'0': _urlCut + _data['slide_show'][i]['img_name'],
'id': _data['slide_show'][i]['id']
}));
};
// follow.getList(0);
} else {
}
}
});
getaddPicList: function() {
var image_file;
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(){
console.log(this.files);
image_file=this.files
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 class="result"><img src="'+this.result+'" alt=""/> <span class="span-del">删除</span></div>';
div = document.createElement('div');
div.innerHTML = result;
document.getElementById('container_body').appendChild(div);　　
　}
}
};
console.log(image_file);
},
//删除图片
// 导出列表
exportList: function(pageNo) {
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