农场导览图

templates/backstageNet/production/person_farm_edit.html

@@ -301,7 +301,18 @@
                                 </div>
                             </div>
                         </div>
-
+                        <div class="layui-form-item">
+                            <label class="layui-form-label">导览图：</label>
+                            <div class="layui-input-inline">
+                                <button type="button" class="uploadImg uploadImgIcon" id="newsUpImg"></button>
+                                <!-- 隐藏的input -->
+                                <input type="hidden" id="img_url" name="guide_img" value="" />
+                                <div class="layui-upload-list">
+                                    <img class="layui-upload-img" id="demo1" :src=head_img>
+                                    <p id="demoText"></p>
+                                </div>
+                            </div>
+                        </div>
                         <div class="layui-form-item">
                             <div class="layui-input-block">
                                 <button class="layui-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button>
@@ -381,6 +392,7 @@
                             , "location": data.location
                             , "desc": data.desc
                             , "img": data.img
+                            , "guide_img": 'http://127.0.0.1:8000/'+data.guide_img
                         })
                     });
                     var latlan = data.location.split(',');
@@ -400,7 +412,7 @@
                     } else {
 
                     }
-
+                    $('#demo1').attr('src','http://127.0.0.1:8000/'+data.guide_img);
                 }
             },
             error: function (type) {
@@ -451,6 +463,45 @@
                 }
             });
 
+
+            // 导览图
+            var uploadInst = upload.render({
+                elem: '#newsUpImg'
+                , url: 'guide_img'
+                , field: 'upload'
+                , accept: 'images' //只允许上传图片
+                // , acceptMime: 'image/*' //只筛选图片
+                // ,exts: 'jpg|jpeg' 
+                , size: 1024 * 2 //限定大小
+                , xhr: function () { } //上传视频进度条
+                , before: function (obj) {
+                    $('.uploadImg').removeClass('uploadImgIcon')
+                    //预读本地文件示例，不支持ie8
+                    obj.preview(function (index, file, result) {
+                        $('#demo1').attr('src', result); //图片链接（base64）
+                    });
+                }
+                , done: function (res) {
+                    //如果上传失败
+                    if (res.code == 0) {
+                        //上传成功
+                        document.getElementById("img_url").value = res.data.src;
+                    } else {
+                        return layer.msg('上传失败');
+                    }
+
+
+                }
+                , error: function () {
+                    //演示失败状态，并实现重传
+                    var demoText = $('#demoText');
+                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
+                    demoText.find('.demo-reload').on('click', function () {
+                        uploadInst.upload();
+                    });
+                }
+            });
+
             form.verify({
                 expimg: function (value, item) { //value：表单的值、item：表单的DOM对象
                     if (!value) {
@@ -474,6 +525,12 @@
                     return false;
                 }
 
+                var img_url = $('#img_url').val();
+                if (!img_url) {
+                    layer.msg("请上传农场导览图", { icon: 5 });
+                    return false;
+                }
+
                 field = Object.assign(data.field);
 
                 // layer.msg(JSON.stringify(data.field));