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