2020-09-04 图片上传

apps/Equipment/urls.py

@@ -270,7 +270,7 @@ urlpatterns = [
     url(r'^guser_photo/(?P<path>.*)', serve, {'document_root': 'F:\YFWLW\second\guser_photo'}), #本地
     url(r'^map_photo/(?P<path>.*)', serve, {'document_root': 'F:\YFWLW\second\map_photo'}), #本地
     url(r'^sightsee_photos/(?P<path>.*)', serve, {'document_root': 'F:\YFWLW\second\sightsee_photos'}), #本地
-    url(r'^media/uploads/(?P<path>.*)', serve, {'document_root': 'F:\YFWLW\second\media\\uploads'}), #本地
+    url(r'^media/(?P<path>.*)', serve, {'document_root': 'F:\YFWLW\second\media'}), #本地
     
     
 

templates/backstageNet/systemSet/imageUpload.html

@@ -194,6 +194,10 @@
         .delTestData {
             display: none;
         }
+
+        .imgHidden {
+            display: none;
+        }
     </style>
 </head>
 
@@ -225,9 +229,9 @@
                     <span class="">轮播图片：</span>
                     <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
                     <div id="demo1" style="margin-top: 10px">
-                        <img src="" alt="" style="width: 1200px; height: 470px;" class="layui-upload-img"
-                            id="carouselImg">
+                        <img src="" alt="" class="layui-upload-img imgHidden" id="carouselImg">
                     </div>
+                    <ul id="listData"></ul>
                     <button type="button" class="layui-btn testListAction" id="testListAction">开始上传</button>
                     <button type="button" class="layui-btn layui-btn-danger delTestData" id="delTestData">取消上传</button>
                 </div>
@@ -246,8 +250,9 @@
                     <span class="">广告位图片：</span>
                     <button type="button" class="layui-btn layui-btn-normal" id="replaceImg">选择图片</button>
                     <div id="demo2" style="margin-top: 10px">
-                        <img src="" alt="" style="width: 1200px; height: 90px;" class="layui-upload-img" id="finalImg">
+                        <img src="" alt="" class="layui-upload-img imgHidden" id="finalImg">
                     </div>
+                    <ul id="listDataA"></ul>
                     <button type="button" class="layui-btn imgListAction" id="imgListAction">开始上传</button>
                     <button type="button" class="layui-btn layui-btn-danger delImgData" id="delImgData">取消上传</button>
                 </div>
@@ -316,10 +321,11 @@
             </div>
         </div>
         <!--图片裁剪框 end首页轮播-->
-
     </div>
 
 
+
+
     <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
     <script src="{% static '/lib/layui/layui.js'%}"></script>
     <script src="{% static 'lib/ckeditor/ckeditor.js'%}"></script>
@@ -336,8 +342,58 @@
             upload = layui.upload;
             layer = layui.layer;
             // $ = layui.jquery
+
+
+            imgListData() //请求已上传的图片列表-广告
+            imgListDataA() //请求已上传的图片列表-轮播
         });
 
+        //广告列表请求
+        function imgListData() {
+            $.ajax({
+                url: 'system_photo_save',
+                type: 'post',
+                data: {
+                    code: '2'
+                },
+                success: function (data) {
+                    var dat = JSON.parse(data)
+                    $('#listDataA li').remove()
+                    var html = ''
+                    for (var i = 0; i < dat.length; i++) {
+                        html = '<li class="" style="margin: 10px 0 10px 0"><img style="width: 800px !important; height: 60px" src="' + dat[i].pic_img + '" alt="" class=""></li>'
+                        $('#listDataA').append(html)
+                    }
+                },
+                error: function (err) {
+                    console.log(err)
+                }
+            })
+        }
+
+        //轮播列表请求
+        function imgListDataA() {
+            $.ajax({
+                url: 'system_photo_save',
+                type: 'post',
+                data: {
+                    code: '1'
+                },
+                success: function (data) {
+                    var dat = JSON.parse(data)
+                    $('#listData li').remove()
+                    var html = ''
+                    for (var i = 0; i < dat.length; i++) {
+                        html = '<li class="" style="margin: 10px 0 10px 0"><img style="width: 512px !important; height: 128px" src="' + dat[i].pic_img + '" alt="" class=""></li>'
+                        $('#listData').append(html)
+                    }
+                },
+                error: function (err) {
+                    console.log(err)
+                }
+            })
+        }
+
         windowAddMouseWheel();
         function windowAddMouseWheel() {
             var scrollFunc = function (e) {
@@ -383,30 +439,50 @@
 
         // 广告位开始上传按钮监听事件
         $('#imgListAction').on('click', function () {
-            var timestamp = Date.parse(new Date());
-            var arr = imgArr.split(','), mime = arr[0].match(/:(.*?);/)[1]
-            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-            while (n--) {
-                u8arr[n] = bstr.charCodeAt(n);
-            }
-            var imgFile = new File([u8arr], timestamp, { type: mime })
-            console.log(imgFile)
-
-            // var timestamp = Date.parse(new Date());
-            // var arr = base64url.split(','), mime = arr[0].match(/:(.*?);/)[1]
-            // if (imgArr.length == 1) {
-            //     var arr = imgArr[0].split(','), mime = arr[0].match(/:(.*?);/)[1],
-            // } else if (imgArr.length == 2) {
-            //     var arr = imgArr[1].split(','), mime = arr[0].match(/:(.*?);/)[1],
-            // } else if (imgArr.length == 3) {
-            //     var arr = imgArr[2].split(','), mime = arr[0].match(/:(.*?);/)[1],
-            // }
-            // var arr = imgArr[0].split(','), mime = arr[0].match(/:(.*?);/)[1],
-            // bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-            // while (n--) {
-            //     u8arr[n] = bstr.charCodeAt(n);
-            // }
-            // var imgFile = new File([u8arr], timestamp, { type: mime })
+            var fileObj = dataURLtoFile(imgArr, $('#chooseImg').val())
+            var form = new FormData();
+            form.append("upload1", fileObj);
+
+            $.ajax({
+                url: 'system_photo',
+                type: 'post',
+                data: form,
+                processData: false, // 告诉jQuery不要去处理发送的数据
+                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
+                success: function (data) {
+                    console.log(data)
+                    $.ajax({
+                        url: 'system_photo_save',
+                        type: 'post',
+                        data: {
+                            code: '2'
+                        },
+                        success: function (data) {
+                            var dat = JSON.parse(data)
+                            if (dat.length != 0) {
+                                layer.msg('上传成功', { icon: 1 });
+                                imgArr = [] //清空数组数据
+                                $('#delImgData').addClass('delImgData')
+                                $('#finalImg').addClass('imgHidden')
+                                // $('#demo2 img').remove();  //删除所有img
+                                $('#imgListAction').addClass('imgListAction') //隐藏上传按钮
+                                $('#delImgData').addClass('delImgData') //隐藏取消按钮
+                                imgListData() //请求已上传的图片列表-广告
+                            } else if (data == 0) {
+                                layer.msg('上传失败', { icon: 2 });
+                            }
+                        },
+                        error: function (err) {
+                            console.log(err)
+                        }
+                    })
+                },
+                error: function (err) {
+                    console.log(err)
+                }
+            })
+
+
         });
 
         // 广告位取消上传按钮监听事件
@@ -415,7 +491,9 @@
                 btn: ['确定', '取消'] //按钮
             }, function () {
                 imgArr = [] //清空数组数据
-                $('#demo2 img').remove();  //删除所有img
+                $('#delImgData').addClass('delImgData')
+                $('#finalImg').addClass('imgHidden')
+                // $('#demo2 img').remove();  //删除所有img
                 $('#imgListAction').addClass('imgListAction') //隐藏上传按钮
                 $('#delImgData').addClass('delImgData') //隐藏取消按钮
                 layer.msg('删除成功', { icon: 1 });
@@ -463,7 +541,7 @@
                 //更换cropper的图片
                 $('#tailoringImg').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
             }
-            advertisingName = fileA.files[0].name
+            advertisingName = file.files[0].name
             reader.readAsDataURL(file.files[0]);
         }
         //cropper图片裁剪
@@ -513,33 +591,29 @@
                 var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
                 var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
                 imgArr = base64url
-                console.log(imgArr)
                 $("#finalImg").prop("src", base64url);//显示为图片的形式
+                $('#finalImg').removeClass('imgHidden')
                 //关闭裁剪框
                 closeTailor();
                 $('#imgListAction').removeClass('imgListAction')
                 $('#delImgData').removeClass('delImgData')
-
-
-                // var timestamp = Date.parse(new Date());
-                // var arr = base64url.split(','), mime = arr[0].match(/:(.*?);/)[1],
-                //     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-                // while (n--) {
-                //     u8arr[n] = bstr.charCodeAt(n);
-                // }
-                // var imgFile = new File([u8arr], timestamp, { type: mime })
-                // imgArr.push(imgFile)
-                // if (imgArr.length == 1) {
-                //     $('#demo2').append('<img src="' + imgArr[0] + '"class="layui-upload-img">')
-                // } else if (imgArr.length == 2) {
-                //     $('#demo2').append('<img src="' + imgArr[1] + '" class="layui-upload-img">')
-                // } else if (imgArr.length == 3) {
-                //     $('#demo2').append('<img src="' + imgArr[2] + '"class="layui-upload-img">')
-                // }
-
-
-
-
+                // var fileObj = dataURLtoFile(imgArr, $('#chooseImg').val())
+                // var form = new FormData();
+                // form.append("upload1", fileObj);
+
+                // $.ajax({
+                //     url: 'system_photo',
+                //     type: 'post',
+                //     data: form,
+                //     processData: false, // 告诉jQuery不要去处理发送的数据
+                //     contentType: false, // 告诉jQuery不要去设置Content-Type请求头
+                //     success: function (data) {
+                //         console.log(data)
+                //     },
+                //     error: function (err) {
+                //         console.log(err)
+                //     }
+                // })
             }
         });
         //广告位关闭裁剪框
@@ -551,13 +625,46 @@
 
         // 首页轮播开始上传按钮监听事件
         $('#testListAction').on('click', function () {
-            // var timestamp = Date.parse(new Date());
-            // var arr = imgArrA.split(','), mime = arr[0].match(/:(.*?);/)[1]
-            //     bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-            // while (n--) {
-            //     u8arr[n] = bstr.charCodeAt(n);
-            // }
-            // var imgFile = new File([u8arr], timestamp, { type: mime })
+            var fileObj = dataURLtoFile(imgArrA, $('#chooseImgA').val())
+            var form = new FormData();
+            form.append("upload", fileObj);
+            $.ajax({
+                url: 'system_photo',
+                type: 'post',
+                data: form,
+                processData: false, // 告诉jQuery不要去处理发送的数据
+                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
+                success: function (data) {
+                    $.ajax({
+                        url: 'system_photo_save',
+                        type: 'post',
+                        data: {
+                            code: '1'
+                        },
+                        success: function (data) {
+                            console.log(JSON.parse(data))
+                            var dat = JSON.parse(data)
+                            if (dat.length != 0) {
+                                layer.msg('上传成功', { icon: 1 });
+                                imgArr = [] //清空数组数据
+                                $('#carouselImg').addClass('imgHidden')
+                                // $('#demo1 img').remove();  //删除所有img
+                                $('#testListAction').addClass('testListAction') //隐藏上传按钮
+                                $('#delTestData').addClass('delTestData') //隐藏取消按钮
+                                imgListDataA() //请求已上传的图片列表-轮播
+                            } else if (data == 0) {
+                                layer.msg('上传失败', { icon: 2 });
+                            }
+                        },
+                        error: function (err) {
+                            console.log(err)
+                        }
+                    })
+                },
+                error: function (err) {
+                    console.log(err)
+                }
+            })
         });
 
         // 首页轮播取消上传按钮监听事件
@@ -566,7 +673,8 @@
                 btn: ['确定', '取消'] //按钮
             }, function () {
                 imgArr = [] //清空数组数据
-                $('#demo1 img').remove();  //删除所有img
+                $('#carouselImg').addClass('imgHidden')
+                // $('#demo1 img').remove();  //删除所有img
                 $('#testListAction').addClass('testListAction') //隐藏上传按钮
                 $('#delTestData').addClass('delTestData') //隐藏取消按钮
                 layer.msg('删除成功', { icon: 1 });
@@ -578,8 +686,6 @@
         //首页轮播上传图片按钮监听事件
         $('#testList').on('click', function () {
             // $("#replaceImg").addClass("layui-btn-disabled")
-            boxSize1 = 4
-            boxSize2 = 1
             //弹出图片裁剪框
             $("#testList").on("click", function () {
                 $(".tailoring-container2").toggle();
@@ -648,50 +754,29 @@
                 var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
                 imgArrA = base64url
                 $("#carouselImg").prop("src", base64url);//显示为图片的形式
+                $('#carouselImg').removeClass('imgHidden')
+
                 //关闭裁剪框
                 closeTailorA();
                 $('#testListAction').removeClass('testListAction')
                 $('#delTestData').removeClass('delTestData')
-                var fileObj = dataURLtoFile(imgArrA, $('#chooseImgA').val())
-				var form = new FormData();
-				form.append("upload", fileObj);
-                // var arr = imgArrA.split(','), mime = arr[0].match(/:(.*?);/)[1]
-                // bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-                // while (n--) {
-                //     u8arr[n] = bstr.charCodeAt(n);
-                // }
-                // var imgFile = new File([u8arr], carouselName, { type: mime })
-                // var form = new FormData()
-                // form.append('upload', imgFile)
-                $.ajax({
-                    url: 'system_photo',
-                    type: 'post',
-                    data: form,
-                    processData: false, // 告诉jQuery不要去处理发送的数据
-                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
-                    success: function (data) {
-                        console.log(data)
-                    },
-                    error: function (err) {
-                        console.log(err)
-                    }
-                })
+
             }
         });
-        function dataURLtoFile(dataurl,filename) {
-			var arr = dataurl.split(',');
-			var mime = arr[0].match(/:(.*?);/)[1];
-			var bstr = atob(arr[1]);
-			var n = bstr.length;
-			var u8arr = new Uint8Array(n);
-			while (n--) {
-				u8arr[n] = bstr.charCodeAt(n);
-			}
-			//转换成file对象
-			return new File([u8arr], filename, { type: mime });
-			//转换成成blob对象
-			//return new Blob([u8arr],{type:mime});
-		}
+        function dataURLtoFile(dataurl, filename) {
+            var arr = dataurl.split(',');
+            var mime = arr[0].match(/:(.*?);/)[1];
+            var bstr = atob(arr[1]);
+            var n = bstr.length;
+            var u8arr = new Uint8Array(n);
+            while (n--) {
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            //转换成file对象
+            return new File([u8arr], filename, { type: mime });
+            //转换成成blob对象
+            //return new Blob([u8arr],{type:mime});
+        }
         //首页轮播关闭裁剪框
         function closeTailorA() {
             $(".tailoring-container2").toggle();