12312

c0cd89d7 · 施宇 · 9db21323 · c0cd89d7 · c0cd89d7 · c0cd89d7
Commit c0cd89d7 authored Jul 02, 2019 by 施宇
Showing with 157 additions and 7 deletions
Application/Home/View/GoodManage/bulkupload.html
dist/css/bulkupload.css
dist/css/bulkupload.less
dist/js/global/api.js
dist/js/goodmanage/bulkupload.js
--- a/Application/Home/View/GoodManage/bulkupload.html
+++ b/Application/Home/View/GoodManage/bulkupload.html
@@ -4,6 +4,35 @@
 <head>
    <include file="public/header" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bulkupload.css">
+    <style>
+    .webuploader-container {
+	position: relative;
+}
+.webuploader-element-invisible {
+	position: absolute !important;
+	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px,1px,1px,1px);
+}
+.webuploader-pick {
+	position: relative;
+	display: inline-block;
+	cursor: pointer;
+	background: #00b7ee;
+	padding: 10px 15px;
+	color: #fff;
+	text-align: center;
+	border-radius: 3px;
+	overflow: hidden;
+}
+.webuploader-pick-hover {
+	background: #00a2d4;
+}
+
+.webuploader-pick-disable {
+	opacity: 0.6;
+	pointer-events:none;
+}
+    </style>
 </head>

 <body>
@@ -14,7 +43,7 @@
            <div class="right_content upload_bulk_content">
                <div class="content">
                    <div class="nav_title">商品管理 > 发布商品 > 批量上传</div>
-                    <div class="inquiry_form">
+                    <!-- <div class="inquiry_form">
                        <div class="top_title clr">
                            <h3 class="bold fl">批量上传</h3>
                        </div>
@@ -22,7 +51,7 @@
                            <span class="icon iconfont iconjuxing19 va-m"></span>
                            <span>上传的商品有图片，搜索排名会优先排前</span>
                        </div>
-                        <div class="upload_section">
+                        <div class="upload_section" id="upload_section">
                            <div class="icon iconfont iconjuxing16"></div>
                            <p>将商品表格拖拽或点击到此处上传</p>
                        </div>
@@ -35,12 +64,32 @@
                            <p>2、请下载模板，并根据模板格式上传 </p>
                            <p>3、为加快匹配速度，请保证每份文件型号数不超过200</p>
                        </div>
+                    </div> -->
+                    <form class="layui-form" enctype="multipart/form-data" id="fileLoad">
+                        <div class="layui-row">
+                            <div class="layui-form-item schedule-item width100">
+                                <label class="layui-form-label">附件：</label>
+                                <div class="layui-input-block ml80" id="fileUp">
+                                    //自己所需要传的值
+                                    <input type="text" name="token" value="520" style="display: none"/>
+                                     
+                            
+                                    <div>
+                                        <input type="file" id="mineFiles" name="file"/>
+                                    </div>
+                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal openFile" id="upLoad">添加附件</button>
                                </div>
                            </div>
                        </div>
+                    </form>
                </div>
            </div>
+        </div>
+    </div>
+
    <include file="public/foot" />
+    <script src="https://cdn.bootcss.com/jquery.form/3.45.0/jquery.form.min.js"></script>
+    <script src="__PUBLIC__/js/goodmanage/bulkupload.js"></script>
 </body>

 </html>
\ No newline at end of file
--- a/dist/css/bulkupload.css
+++ b/dist/css/bulkupload.css
@@ -7,6 +7,7 @@
 .upload_bulk_content .inquiry_form {
  background-color: #fff;
  padding-bottom: 40px;
+  position: relative;
 }
 .upload_bulk_content .inquiry_form .top_title {
  padding: 26px 30px 0;
@@ -77,4 +78,3 @@
 .upload_bulk_content .inquiry_form .upload_text p {
  margin-top: 10px;
 }
-/*# sourceMappingURL=bulkupload.css.map */
\ No newline at end of file
--- a/dist/css/bulkupload.less
+++ b/dist/css/bulkupload.less
@@ -8,6 +8,7 @@
    .inquiry_form {
        background-color: #fff;
        padding-bottom: 40px;
+        position: relative;

        .top_title {
            padding: 26px 30px 0;
@@ -51,7 +52,6 @@
            border: 1px dashed #D8DFE6;
            text-align: center;
            cursor: pointer;
-
            div {
                color: #ADB6BF;
                font-size: 60px;
@@ -64,7 +64,6 @@
                margin-top: 35px;
            }
        }
-
        .btn_div {
            text-align: center;
            margin-top:30px;

--- a/dist/js/global/api.js
+++ b/dist/js/global/api.js
@@ -36,8 +36,9 @@
    /**
     * 商品修改
     */
-    goodsSave: goods + '/goods/save'
+    goodsSave: goods + '/goods/save',

+    bulkupload:goods+'/goods/upload',   
  };
  if (typeof define === "function" && define.amd) {
    return apis;

--- a/dist/js/goodmanage/bulkupload.js
+++ b/dist/js/goodmanage/bulkupload.js
+$(function () {
+    // var bulkuploadObj = {
+    //     init: function () {
+    //         this.uploadFun();
+    //         this.bindFun();
+    //     },
+    //     uploadFun: function () {
+    //         layui.upload.render({
+    //             elem: '#upload_section',
+    //             url: apis.bulkupload,
+    //             data: {
+    //                 token: "520"
+    //             },
+    //             accept: "file",
+    //             exts: "xls|xlsx",
+    //             before: function () {
+    //                 layer.load(1, {
+    //                     offset: ['50%', "50%"],
+    //                     shade: false
+    //                 });
+    //             },
+    //             done: function (res, index, upload) {
+    //                 layer.closeAll('loading');
+    //                 if (res.errcode == 0) {
+    //                     layer.msg('上传成功', {
+    //                         time: 600
+    //                     }, function () {
+    //                         window.location.href = "/uploadresult";
+    //                     });
+
+    //                 } else {
+    //                     layer.msg(res.errmsg)
+    //                 }
+    //             },
+    //             err: function () {
+    //                 layer.closeAll('loading');
+    //                 layer.msg('上传失败');
+
+    //             }
+    //         });
+
+    //     },
+    //     bindFun: function () {
+    //         $('.sc').on('click', function () {
+    //             $('#upload_section').click()
+    //         })
+    //     }
+    // };
+    // bulkuploadObj.init();
+
+    $(".openFile").click(function () { 
+        //按钮被点击，触发标签点击事件，只有在非IE8下才有效果
+        $("#mineFiles").click();
+    });
+    //实际的标签点击事件
+    $("#mineFiles").change(function (e) {
+    //IE8浏览器的判断
+    if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0") {
+    //一些需要动态的赋值
+    $("#fileLoad").ajaxSubmit({
+     url :apis.bulkupload,
+    type : "post",
+    //应该为text
+    dataType : 'json',
+    success : function(data) {
+    console.log(data)
+    //相关的处理
+    },
+    error:function(data) {
+    console.log(1111);}
+    });
+    }else{
+    //非IE8下使用formData
+    var formdata = new FormData();
+    //拿到相关的文件
+    var doc = document.getElementById("mineFiles");
+    formdata.append("file", doc.files[0]);
+    formdata.append('token','520')
+    $.ajax({
+    url: apis.bulkupload,
+    type: "post",
+    data: formdata,
+    cache: false,
+    processData: false,
+    contentType: false,
+    dataType : 'json',
+    //开始loading
+    beforeSend: function () {
+
+    },
+    success: function (res) {
+        console.log(res)
+
+    }
+    });
+    } 
+})
+     
+
+})
\ No newline at end of file