style:图片上传
Showing
3 changed files
with
26 additions
and
10 deletions
... | @@ -439,6 +439,10 @@ input[type='file'] { | ... | @@ -439,6 +439,10 @@ input[type='file'] { |
439 | .conImageUpdate { | 439 | .conImageUpdate { |
440 | width: 100%; | 440 | width: 100%; |
441 | min-height: 290px; | 441 | min-height: 290px; |
442 | border: 1px solid #DEDEDE; | ||
443 | border-radius: 5px; | ||
444 | padding: 10px 0; | ||
445 | box-sizing: border-box; | ||
442 | } | 446 | } |
443 | .itemImageUpdate { | 447 | .itemImageUpdate { |
444 | margin-right: 15px; | 448 | margin-right: 15px; |
... | @@ -479,5 +483,6 @@ input[type='file'] { | ... | @@ -479,5 +483,6 @@ input[type='file'] { |
479 | margin-right: 10px; | 483 | margin-right: 10px; |
480 | height: 240px; | 484 | height: 240px; |
481 | width: 70px; | 485 | width: 70px; |
482 | line-height: 240px; | 486 | text-align: center; |
487 | writing-mode:vertical-lr; | ||
483 | } | 488 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -319,15 +319,21 @@ function AddCLxxClick() { | ... | @@ -319,15 +319,21 @@ function AddCLxxClick() { |
319 | $(this).next().click(); //隐藏了input:file样式后,点击头像就可以本地上传 | 319 | $(this).next().click(); //隐藏了input:file样式后,点击头像就可以本地上传 |
320 | $(this).next().on("change", function () { | 320 | $(this).next().on("change", function () { |
321 | var objUrl = getObjectURL(this.files[0]); //获取图片的路径,该路径不是图片在本地的路径 | 321 | var objUrl = getObjectURL(this.files[0]); //获取图片的路径,该路径不是图片在本地的路径 |
322 | var file = this.files[0].type; | ||
323 | if (file=='') { | ||
324 | layer.msg('请上传,jpg,png,jpeg,gif格式文件'); | ||
325 | return false; | ||
326 | } | ||
322 | if (objUrl) { | 327 | if (objUrl) { |
323 | let bsm_slclmx = UploadPicture(this.files[0], $(this).parent().parent().prop("id")); | 328 | let imageData = UploadPicture(this.files[0], $(this).parent().parent().prop("id")); |
324 | if (bsm_slclmx == "") { | 329 | console.log(999, imageData) |
330 | if (imageData.bsm_slclmx == "") { | ||
325 | layer.msg('图片上传失败,请稍后上传!'); | 331 | layer.msg('图片上传失败,请稍后上传!'); |
326 | } | 332 | } |
327 | else { | 333 | else { |
328 | layer.msg('图片上传成功'); | 334 | layer.msg('图片上传成功'); |
329 | $(this).prev().attr("src", objUrl);//将图片路径存入src中,显示出图片 | 335 | $(this).prev().attr("src", imageData.preViewUrl);//将图片路径存入src中,显示出图片 |
330 | $(this).parent().attr("id", bsm_slclmx); | 336 | $(this).parent().attr("id", imageData.bsm_slclmx); |
331 | $(this).parent().find('.mask').show(); | 337 | $(this).parent().find('.mask').show(); |
332 | } | 338 | } |
333 | } | 339 | } |
... | @@ -336,6 +342,7 @@ function AddCLxxClick() { | ... | @@ -336,6 +342,7 @@ function AddCLxxClick() { |
336 | //del | 342 | //del |
337 | $(document).on("click", ".delete", function (e) { | 343 | $(document).on("click", ".delete", function (e) { |
338 | let imgObj = $(this).parent().parent().siblings(".pic"); | 344 | let imgObj = $(this).parent().parent().siblings(".pic"); |
345 | let mask = $(this).parent().parent(); | ||
339 | let file = $(this).parent().parent().siblings("input[type='file']"); | 346 | let file = $(this).parent().parent().siblings("input[type='file']"); |
340 | let slclmxObj = $(this).parent().parent().parent(); | 347 | let slclmxObj = $(this).parent().parent().parent(); |
341 | layer.confirm('此操作将删除图片是否继续', { | 348 | layer.confirm('此操作将删除图片是否继续', { |
... | @@ -352,13 +359,14 @@ function AddCLxxClick() { | ... | @@ -352,13 +359,14 @@ function AddCLxxClick() { |
352 | success: function (result) {//返回数据根据结果进行相应的处理 | 359 | success: function (result) {//返回数据根据结果进行相应的处理 |
353 | if (result.code == 200) { | 360 | if (result.code == 200) { |
354 | layer.msg(result.message); | 361 | layer.msg(result.message); |
362 | mask.hide(); | ||
355 | imgObj.attr("src", "../../staticImages/update.png"); | 363 | imgObj.attr("src", "../../staticImages/update.png"); |
356 | file.after(file.clone().val("")); | 364 | file.after(file.clone().val("")); |
357 | file.remove(); | 365 | file.remove(); |
358 | slclmxObj.attr("id", ""); | 366 | slclmxObj.attr("id", ""); |
359 | } else { | 367 | } else { |
360 | layer.msg('删除失败!'); | 368 | layer.msg('删除失败!'); |
361 | 369 | ||
362 | } | 370 | } |
363 | } | 371 | } |
364 | }); | 372 | }); |
... | @@ -368,7 +376,9 @@ function AddCLxxClick() { | ... | @@ -368,7 +376,9 @@ function AddCLxxClick() { |
368 | }) | 376 | }) |
369 | // 放大 | 377 | // 放大 |
370 | $(document).on("click", ".enlarge", function (e) { | 378 | $(document).on("click", ".enlarge", function (e) { |
371 | var imgHtml = "<img src='../../staticImages/update.png' />"; | 379 | let src = $(this).parent().parent().siblings(".pic").attr('src') |
380 | console.log($(this).parent().parent().siblings(".pic").attr('src')) | ||
381 | var imgHtml = "<img style='width:1000px;height:600px' src='"+src+"' />"; | ||
372 | layer.open({ | 382 | layer.open({ |
373 | type: 1, | 383 | type: 1, |
374 | title: false, | 384 | title: false, |
... | @@ -383,7 +393,7 @@ function AddCLxxClick() { | ... | @@ -383,7 +393,7 @@ function AddCLxxClick() { |
383 | 393 | ||
384 | // 图片上传 | 394 | // 图片上传 |
385 | function UploadPicture(flie, bsmCl) { | 395 | function UploadPicture(flie, bsmCl) { |
386 | let bsm_slclmx = ""; | 396 | let imageData; |
387 | let formData = new FormData(); | 397 | let formData = new FormData(); |
388 | formData.append('bsmCl', bsmCl); | 398 | formData.append('bsmCl', bsmCl); |
389 | formData.append('files', flie); | 399 | formData.append('files', flie); |
... | @@ -399,11 +409,11 @@ function UploadPicture(flie, bsmCl) { | ... | @@ -399,11 +409,11 @@ function UploadPicture(flie, bsmCl) { |
399 | //数据,这里使用的是Json格式进行传输 | 409 | //数据,这里使用的是Json格式进行传输 |
400 | success: function (result) {//返回数据根据结果进行相应的处理 | 410 | success: function (result) {//返回数据根据结果进行相应的处理 |
401 | if (result.code == 200) { | 411 | if (result.code == 200) { |
402 | bsm_slclmx = result.data[0].bsmSlclmx; | 412 | imageData = result.data[0]; |
403 | } | 413 | } |
404 | } | 414 | } |
405 | }); | 415 | }); |
406 | return bsm_slclmx; | 416 | return imageData; |
407 | } | 417 | } |
408 | 418 | ||
409 | 419 | ... | ... |
-
Please register or sign in to post a comment