1. 程式人生 > >layui 單個圖片上傳

layui 單個圖片上傳

<div class="layui-form-item">
                <label class="layui-form-label">LOGO圖片:</label>
                <div class="layui-upload">                     
                  <div class="layui-upload-list">
                    <img class="layui-upload-img" id="upimg">
                  </div>
                   <button type="button" class="layui-btn" id="upbtn">更新上傳</button>
                   <input type="hidden" value="1" name="logo"/>
                </div>      
            </div>

//若是出現不可上傳同一圖片問題 則需要清理file的value

var uploadInst = upload.render({
                    elem: '#upbtn'
                    ,url: '<?php echo Url::to(['/admin/upload/img']); ?>&type=1'
                    ,field:'UploadForm[file]'
                    ,acceptMime: 'image/jpg, image/png, image/jpeg'
                    ,exts:'jpg|png|jpeg'
                    ,before: function(obj){
                         layer.load(1, {
                            shade: [0.5,'#000']
                         }); 
                      //預讀本地檔案示例,不支援ie8
                      obj.preview(function(index, file, result){
                        $('#upimg').attr('src', result); //圖片連結
                      });
                    }
                    ,done: function(res){
                      //如果上傳失敗
                      if(res.code > 0){    
                        return layer.msg('上傳失敗');
                      }else{       //上傳成功    
                           $("input[name='logo']").val(res.msg);    
                           layer.msg("上傳成功");
                      }    
                        layer.closeAll();                  
                    }
                    ,error: function(){
                      //演示失敗狀態,並實現重傳
                      layer.closeAll();                  
                      layer.msg("上傳失敗");
                    }
                  });