Skip to content

杨建斌 / page

Go to a project
Toggle navigation
Toggle navigation pinning
8680660b by Zelig
Options

图片上传

1 parent 2cfb3cde
Inline Side-by-side
Showing 3 changed files with 95 additions and 28 deletions
application/views/user/资料清单.php
...@@ -50,6 +50,8 @@ ...@@ -50,6 +50,8 @@
50 var index = getQueryString('tab'); 50 var index = getQueryString('tab');
51 51
52 $("#tab").Huitab({index: index}); 52 $("#tab").Huitab({index: index});
53
54 uploadList();
53 </script> 55 </script>
54 </body> 56 </body>
55 </html> 57 </html>
......
application/views/work/图片上传.php
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
8 <span class="form-control select-box"> 8 <span class="form-control select-box">
9 <select class="select uploader" size="1" name="sourceType" id="upload"> 9 <select class="select uploader" size="1" name="sourceType" id="upload">
10 <?php foreach ($this->session->sourceBaseType as $k=>$v):?> 10 <?php foreach ($this->session->sourceBaseType as $k=>$v):?>
11 <option value="<?=$v->code?>"><?=$v->desc?></option> 11 <option value="<?=$v->code?>" data-name="<?=$v->desc?>"><?=$v->desc?></option>
12 <?php if($v->children && !empty($v->children)):?> 12 <?php if($v->children && !empty($v->children)):?>
13 <?php foreach ($this->session->sourceBaseType as $kk=>$vv):?> 13 <?php foreach ($this->session->sourceBaseType as $kk=>$vv):?>
14 <option value="<?=$vv->code?>">&nbsp;&nbsp;--<?=$vv->desc?></option> 14 <option value="<?=$vv->code?>" data-name="<?=$v->desc .'-'.$vv->desc?>">&nbsp;&nbsp;--<?=$vv->desc?></option>
15 <?php endforeach;?> 15 <?php endforeach;?>
16 <?php endif;?> 16 <?php endif;?>
17 <?php endforeach;?> 17 <?php endforeach;?>
...@@ -34,28 +34,8 @@ ...@@ -34,28 +34,8 @@
34 <th>类型</th> 34 <th>类型</th>
35 <th>支持相同类型图片上传多张, 格式: png/jpg 单张限制5M</th> 35 <th>支持相同类型图片上传多张, 格式: png/jpg 单张限制5M</th>
36 </tr> 36 </tr>
37 </tbody> 37 </thead>
38 <tbody> 38 <tbody>
39 <tr data-id="1">
40 <td class="text-c">浙江法院公开网</td>
41 <td>
42 <div class="filelist"></div>
43 </td>
44 </tr>
45 <tr data-id="2">
46 <td class="text-c">全国被执行网</td>
47 <td>
48 <div class="filelist">
49 <div id="WU_FILE_X_1" class="file-item thumbnail">
50 <img src="holder.js/100x100">
51 <div class="info">Snipaste_2018-01-18_00-10-20.png</div>
52 <div class="file-panel">
53 <span class="cancel">删除</span>
54 </div>
55 </div>
56 </div>
57 </td>
58 </tr>
59 </tbody> 39 </tbody>
60 </table> 40 </table>
61 </div> 41 </div>
......
resource/upload.js
...@@ -28,7 +28,22 @@ jQuery(function() { ...@@ -28,7 +28,22 @@ jQuery(function() {
28 28
29 // 当有文件添加进来的时候 29 // 当有文件添加进来的时候
30 uploader.on('fileQueued', function(file) { 30 uploader.on('fileQueued', function(file) {
31 var $id = $('select.uploader').val(), $list = $('tr[data-id='+$id+'] .filelist'); 31 // var $id = $('select.uploader').val();
32 var $id = $('select.uploader').val();
33 var $tr = $('tr[data-id='+$id+']');
34
35 if(!$tr.length) {
36 var name = $('select.uploader option:selected').data('name');
37 var tr = '<tr data-id="'+$id+'">\
38 <td class="text-c">'+name+'</td>\
39 <td>\
40 <div class="filelist"></div>\
41 </td>\
42 </tr>'
43 $('tbody').append(tr);
44 }
45
46 var $list = $('tr[data-id='+$id+'] .filelist');
32 var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + 47 var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' +
33 '<div class="info">' + file.name + '</div>' + '</div>'), 48 '<div class="info">' + file.name + '</div>' + '</div>'),
34 $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>').appendTo( $li ), 49 $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>').appendTo( $li ),
...@@ -87,8 +102,10 @@ jQuery(function() { ...@@ -87,8 +102,10 @@ jQuery(function() {
87 }); 102 });
88 103
89 // 文件上传成功，给item添加成功class, 用样式标记上传成功。 104 // 文件上传成功，给item添加成功class, 用样式标记上传成功。
90 uploader.on('uploadSuccess', function(file) { 105 uploader.on('uploadSuccess', function(file, response) {
91 $('#' + file.id).addClass('upload-state-done'); 106 var img = $('#' + file.id);
107 img.data('id', response.data.id);
108 img.addClass('upload-state-done');
92 }); 109 });
93 110
94 // 文件上传失败，现实上传出错。 111 // 文件上传失败，现实上传出错。
...@@ -109,6 +126,41 @@ jQuery(function() { ...@@ -109,6 +126,41 @@ jQuery(function() {
109 $('#' + file.id).find('.progress').remove(); 126 $('#' + file.id).find('.progress').remove();
110 }); 127 });
111 128
129
130 });
131
132 window.uploadList = function () {
133 var targetUrl = 'order/ordersource/base/' + $('#orderId').val();
134
135 $.ajax({
136 type: 'get',
137 url: apiBaseUrl + targetUrl,
138 cache: false,
139 dataType: 'json',
140 contentType: "application/json; charset=UTF-8",
141 success: function (data) {
142 var html = '';
143
144 for (var s in data.data) {
145 var sid = data.data[s][0].sourceType;
146
147 html += '<tr data-id="'+sid+'"><td class="text-c">'+s+'</td><td><div class="filelist">';
148
149 data.data[s].forEach(function (item) {
150 html += '<div id="WU_FILE_X_'+item.id+'" class="file-item thumbnail" data-id="'+item.id+'">\
151 <img src="'+item.url+'" width="100" hegiht="100px">\
152 <div class="info">'+item.fileName+'</div>\
153 <div class="file-panel">\
154 <span class="cancel">删除</span>\
155 </div>\
156 </div>'
157 });
158
159 html += '</div></td></tr>';
160 }
161
162 $('tbody').append(html);
163
112 $('.file-item').on('mouseenter', function () { 164 $('.file-item').on('mouseenter', function () {
113 $(this).find('.file-panel').stop().animate({height: 30}); 165 $(this).find('.file-panel').stop().animate({height: 30});
114 }); 166 });
...@@ -121,10 +173,43 @@ jQuery(function() { ...@@ -121,10 +173,43 @@ jQuery(function() {
121 var id = $(this).parents('.file-item.thumbnail').attr('id'), file = {id, id}; 173 var id = $(this).parents('.file-item.thumbnail').attr('id'), file = {id, id};
122 removeFile(file); 174 removeFile(file);
123 }); 175 });
176 },
177 error: function () {
178 layer.alert("图片获取失败");
179 }
180 })
181 }
124 182
125 function removeFile( file ) { 183 function removeFile( file ) {
126 var $li = $('#'+file.id); 184 var $li = $('#'+file.id);
185 var id = $('#'+file.id).data('id');
186
187 var targetUrl = 'order/ordersource/delete/' + id;
188
189 $.ajax({
190 type: 'delete',
191 url: apiBaseUrl + targetUrl,
192 cache: false,
193 dataType: 'json',
194 contentType: "application/json; charset=UTF-8",
195 success: function (data) {
196 if (data.msg) {
197 layer.alert(data.msg);
198 } else if (data.code != 0) {
199 layer.alert('操作失败');
200 } else {
201 layer.alert('操作成功');
127 $li.off().find('.file-panel').off().end().remove(); 202 $li.off().find('.file-panel').off().end().remove();
128 alert('删除成功');
129 } 203 }
130 }); 204 setTimeout(function () {
205 if(!data.code) {
206 table.fnDraw();
207 layer_close();
208 }
209 },500);
210 },
211 error: function () {
212 layer.alert("操作失败")
213 }
214 })
215 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!