From d089662c7ffa123384970be27b6ed92ff01f2813 Mon Sep 17 00:00:00 2001
From: Anyon <zoujingli@qq.com>
Date: Tue, 11 Jul 2017 12:56:54 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=9B=B4=E6=96=B0]=E5=A2=9E=E5=8A=A0=E5=A4=9A?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E6=A1=88=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 application/demo/view/inter.file.html | 151 +++++++++++++++++++++++---
 1 file changed, 137 insertions(+), 14 deletions(-)

diff --git a/application/demo/view/inter.file.html b/application/demo/view/inter.file.html
index 2dbb0f912..10dfca148 100644
--- a/application/demo/view/inter.file.html
+++ b/application/demo/view/inter.file.html
@@ -17,14 +17,14 @@
             2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：jpg,png。
         </p>
         <p style='font-size:12px;line-height:26px'>
-            3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云 OSS。
+            3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云OSS。
         </p>
         <p style='font-size:12px;line-height:26px'>
             4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。
         </p>
     </blockquote>
     <div style="position:relative">
-        <div class="uploadimage"><input type="hidden" name="file_1"/></div>
+        <div class="uploadimage transition"><input type="hidden" name="file_1"/></div>
         <a data-file="one" data-field="file_1" data-type="png,jpg" data-uptype="local" href="javascript:void(0)" class="uploadbutton">上传图片</a>
     </div>
     <script>
@@ -55,6 +55,129 @@ require(['jquery'], function () {
     </pre>
 </div>
 
+<div class="code">
+    <blockquote class="site-text layui-elem-quote">
+        多图片上传
+        <hr />
+        <p style='font-size:12px;line-height:26px'>
+            1. data-file 指定上传文件模式，可选择 ( one | mut )，one : 表示单文件上传, mut : 表示多文件上传。
+        </p>
+        <p style='font-size:12px;line-height:26px'>
+            2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：jpg,png。
+        </p>
+        <p style='font-size:12px;line-height:26px'>
+            3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云OSS。
+        </p>
+        <p style='font-size:12px;line-height:26px'>
+            4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。
+        </p>
+    </blockquote>
+    <div style="position:relative">
+        <style>
+            .upload-option-button{float:right;background:rgba(0,0,0,0.5);color:#fff;width:20px;height:20px;line-height:20px;text-align:center;display:none}
+            .upload-option-button:hover{text-decoration:none;color:#fff}
+            .uploadimagemtl:hover a{display:inline-block}
+        </style>
+        <input type='hidden' name='file_2' />
+        <p>
+            <a data-file="mut" data-field="file_2" data-type="png,jpg" data-uptype="local" href="javascript:void(0)">上传图片</a>
+        </p>
+    </div>
+    <script>
+        require(['jquery'], function () {
+            var tpl = '<div class="uploadimage transition uploadimagemtl"><a href="javascript:void(0)" class="layui-icon upload-option-button">&#x1006;</a></div>';
+            $('[name="file_2"]').on('change', function () {
+                var input = this, values = [], srcs = this.value.split('|');
+                $(this).prevAll('.uploadimage').map(function () {
+                    values.push($(this).attr('data-tips-image'));
+                }), $(this).prevAll('.uploadimage').remove();
+                values.reverse();
+                for (var i in srcs) {
+                    values.push(srcs[i]);
+                }
+                this.value = values.join('|');
+                for (var i in values) {
+                    var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');
+                    $tpl.data('input', input).data('srcs', values).data('index', i);
+                    $tpl.on('click', 'a', function (e) {
+                        e.stopPropagation();
+                        var $cur = $(this).parent();
+                        $.msg.confirm('确定要移除这张图片吗？', function () {
+                            var data = $cur.data('srcs');
+                            delete data[$cur.data('index')];
+                            $cur.data('input').value = data.join('|');
+                            $cur.remove();
+                        });
+                    });
+                    $(this).before($tpl);
+                }
+            });
+        });
+    </script>
+
+    <pre class="layui-code" lay-title="HTML代码">
+
+<div style="position:relative">
+    <style>
+        .upload-option-button{
+            float:right;
+            background:rgba(0,0,0,0.5);
+            color:#fff;
+            width:20px;
+            height:20px;
+            line-height:20px;
+            text-align:center;
+            display:none
+        }
+        .upload-option-button:hover{
+            text-decoration:none;
+            color:#fff
+        }
+        .uploadimagemtl:hover a{
+            display:inline-block
+        }
+    </style>
+    <input type='hidden' name='file_2' />
+    <p>
+        <a data-file="mut" data-field="file_2" data-type="png,jpg" data-uptype="local" href="javascript:void(0)">上传图片</a>
+    </p>
+</div>
+    </pre>
+
+    <pre class="layui-code" lay-title="javascript代码">
+
+require(['jquery'], function () {
+    var tpl = '<div class="uploadimage transition uploadimagemtl"><a href="javascript:void(0)" class="layui-icon upload-option-button">&#x1006;</a></div>';
+    $('[name="file_2"]').on('change', function () {
+        var input = this, values = [], srcs = this.value.split('|');
+        $(this).prevAll('.uploadimage').map(function () {
+            values.push($(this).attr('data-tips-image'));
+        }), $(this).prevAll('.uploadimage').remove();
+        values.reverse();
+        for (var i in srcs) {
+            values.push(srcs[i]);
+        }
+        this.value = values.join('|');
+        for (var i in values) {
+            var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');
+            $tpl.data('input', input).data('srcs', values).data('index', i);
+            $tpl.on('click', 'a', function (e) {
+                e.stopPropagation();
+                var $cur = $(this).parent();
+                $.msg.confirm('确定要移除这张图片吗？', function () {
+                    var data = $cur.data('srcs');
+                    delete data[$cur.data('index')];
+                    $cur.data('input').value = data.join('|');
+                    $cur.remove();
+                });
+            });
+            $(this).before($tpl);
+        }
+    });
+});
+    </pre>
+</div>
+
 <div class="code">
     <blockquote class="site-text layui-elem-quote">
         单文件上传
@@ -66,7 +189,7 @@ require(['jquery'], function () {
             2. data-type 指定上传文件后缀，多种后缀时使用英文逗号分割，如：zip,rar。
         </p>
         <p style='font-size:12px;line-height:26px'>
-            3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云 OSS。
+            3. data-uptype 指定上传文件存储方式，可选择( local | qiniu | oss )。local : 文件存储在本地服务器, qiniu : 文件存储在七牛云, oss : 文件存储在阿里云OSS。
         </p>
         <p style='font-size:12px;line-height:26px'>
             4. data-field 绑定上传成功后返回URL地址的 input，同时会触发 input 的 change 事件，可以监听并进行处理。
@@ -74,15 +197,15 @@ require(['jquery'], function () {
     </blockquote>
     <div style="position:relative;width:500px">
         <div class="input-group">
-            <input type="text" class="form-control" name="file_2" placeholder="请选择ZIP文件...">
-            <a class="input-group-addon" data-file="one" data-type="zip" data-uptype="local" data-field="file_2">
+            <input type="text" class="form-control" name="file_3" placeholder="请选择ZIP文件...">
+            <a class="input-group-addon" data-file="one" data-type="zip" data-uptype="local" data-field="file_3">
                 <i class="fa fa-file"></i>
             </a>
         </div>
     </div>
     <script>
         require(['jquery'], function () {
-            $('[name="file_2"]').on('change', function () {
+            $('[name="file_3"]').on('change', function () {
                 alert('文件上传后的地址：' + this.value);
             });
         });
@@ -91,13 +214,13 @@ require(['jquery'], function () {
     <pre class="layui-code" lay-title="HTML代码">
 
 <div style="position:relative;width:500px">
-     <div class="input-group">
-         <input type="text" class="form-control" name="file_2" placeholder="请选择ZIP文件...">
-         <a class="input-group-addon" data-file="one" data-type="zip" data-uptype="local" data-field="file_2">
-             <i class="fa fa-file"></i>
-         </a>
-     </div>
- </div>
+    <div class="input-group">
+        <input type="text" class="form-control" name="file_3" placeholder="请选择ZIP文件...">
+        <a class="input-group-addon" data-file="one" data-type="zip" data-uptype="local" data-field="file_3">
+            <i class="fa fa-file"></i>
+        </a>
+    </div>
+</div>
 
     </pre>
     <pre class="layui-code" lay-title="javascript代码">
@@ -105,7 +228,7 @@ require(['jquery'], function () {
 // 监听 input 的 onchange 事件
 // 当有文件上传时，会触发 change 事件
 require(['jquery'], function () {
-    $('[name="file_2"]').on('change', function () {
+    $('[name="file_3"]').on('change', function () {
         alert('文件上传后的地址：' + this.value);
     });
 });