[更新]增加多图片上传案例

application/demo/view/inter.file.html

@@ -24,7 +24,7 @@
         </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">
         单文件上传
@@ -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文件...">
+            <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_2">
+            <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);
             });
         });
@@ -92,8 +215,8 @@ require(['jquery'], function () {
 
 <div style="position:relative;width:500px">
     <div class="input-group">
-         <input type="text" class="form-control" name="file_2" placeholder="请选择ZIP文件...">
+        <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_2">
+        <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>
@@ -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);
     });
 });