layui图片上传

admin

1. <!--
   
2. 图片上传控件
   
3. -->
   
4. <div class="layui-upload">
   
5.         <button type="button" class="layui-btn" name="payment_url" id="alipay_btn">上传截图</button>
   
6.         <div class="layui-upload-list layui-upload-list-plus" id="alipay_photo">
   
7.                  <ul class="multifyBox">
   
8.                                                                                                                                            
   
9.                 </ul>
   
10.                  <!--<p id="uploadText_zs"></p>-->
    
11.         </div>
    
12. </div>                                                                                                                                                                        
    
13. <!--
    
14. end图片上传
    
15. -->
    
16. 
    
17. //js控制控件上传
    
18. <script type="text/javascript">
    
19.            /*
    
20.                           lauyi 文件上传的详细用法：https://www.layui.com/doc/modules/upload.html
    
21.                         */
    
22.                         layui.use('upload', function(){
    
23.                           var $ = layui.jquery
    
24.                           ,upload = layui.upload;                          
    
25.                           
    
26.                           /*
    
27.                            * 支付宝-转账截图/记录,可上传多张
    
28.                            * */                 
    
29.                          var aliPay=upload.render({
    
30.                             elem: '#alipay_btn'
    
31.                             ,url: '/order/imageUpload' //改成您自己的上传接口
    
32.                             ,multiple: true
    
33.                             ,choose: function(obj){
    
34.                                     var files = obj.pushFile();
    
35.                               //预读本地文件示例，不支持ie8
    
36.                             obj.preview(function(index, file, result){
    
37.                                       console.log(index); //得到文件索引
    
38.                     console.log(file);
    
39.                                 $('#alipay_photo').show().find('.multifyBox').append(
    
40.                                         '<li class="mlist'+index+'">'
    
41.                                             +        '<i id="removePimg'+index+'" class="removePimg"></i>'
    
42.                                             +        '<img id="layui-uploadimg'+index+'" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">'
    
43.                                             +'</li>'                                                                                       
    
44.                                 )
    
45.                                 
    
46.                                 // 删除图片
    
47.                                 $("#removePimg"+index).on("click", function(event){
    
48.                                         var _that=$(this);
    
49.                                         //_that.next('.layui-upload-img').attr('src','')
    
50.                                    // _that.parent().remove();
    
51.                                    
    
52.                                     delete files[index];       
    
53.                                     $(".mlist"+index).remove();
    
54.                                 });
    
55.                                 
    
56.                                 //某图片放大预览
    
57.                                 $("#layui-uploadimg"+index).on('click',function () {
    
58.                                     var width = $("#layui-uploadimg"+index).width();
    
59.                                     var height = $("#layui-uploadimg"+index).height();
    
60.                                     var scaleWH = width/height;
    
61.                                     var bigH = 600;
    
62.                                     var bigW = scaleWH*bigH;
    
63.                                     if(bigW>900){
    
64.                                         bigW = 900;
    
65.                                         bigH = bigW/scaleWH;
    
66.                                     }
    
67.                          
    
68.                                     // 放大预览图片
    
69.                                     layer.open({
    
70.                                         type: 1,
    
71.                                         title: false,
    
72.                                         closeBtn: 1,
    
73.                                         shadeClose: true,
    
74.                                         area: [bigW + 'px', bigH + 'px'], //宽高
    
75.                                         content: "<img class='ngsPic' width='"+bigW+"' height='"+bigH+"' src=" + result + " />"
    
76.                                     });
    
77.                                 });                                
    
78.                               });
    
79.                             }
    
80.                             ,done: function(res){
    
81.                                     //如果上传失败
    
82.                               if(res.code > 0){
    
83.                                 return layer.msg('上传失败');
    
84.                               }
    
85.                               //得到上传后的url
    
86.                                          imageUrl=res.data.url;
    
87.                                          //console.log(res.data);
    
88.                                     //上传完毕
    
89.                                     console.log('上传完毕')
    
90.                             }                          
    
91.                           });
    
92.                })
    
93.                </script>
    

复制代码