Share how to use layui upload component-JS Tutorial-php.cn

Share how to use layui upload component

小云云

Release： 2018-03-05 16:42:26

Original

2245 people have browsed it

This article mainly shares with you how to use the layui upload component. First, paste the front-end code. I hope it can help everyone.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>产品特性Form</title>
    <link href="~/Content/Base/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="~/Content/Base/layui/layui.js" type="text/javascript"></script>
    <script src="../../../../Content/Views/js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../../../../Content/Views/js/framework-ui.js" type="text/javascript"></script>
    <style>
        @*table
        {            height: 150px;
        }        .layui-form-label
        {            width: 100px;        }*@    </style></head><body>


    <p style="width:100%;">
        <p class="layui-upload">
          <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> 
          <p class="layui-upload-list">
            <table class="layui-table" id="tableFile">
              <thead>
                <tr><th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
              </tr></thead>
              <tbody id="demoList"></tbody>
            </table>
          </p>
          <button type="button" class="layui-btn" id="testListAction">开始上传</button>
        </p> 
    </p>


    <script>

        function getModelName() {
            var url = location.search; //获取url中"?"符后的字串 
            var theRequest = new Object();            if (url.indexOf("?") != -1) {                var str = url.substr(1);
                strs = str.split("&");                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }            return theRequest;
        };        var parentUrlObj = getModelName();        var FileType = decodeURI(escape(parentUrlObj[&#39;filetype&#39;]));        var ModelId = decodeURI(escape(parentUrlObj[&#39;modelId&#39;]));        var NodeId = decodeURI(escape(parentUrlObj[&#39;nodeid&#39;]));        var ProductId = decodeURI(escape(parentUrlObj[&#39;productid&#39;]));

        layui.use([&#39;form&#39;, &#39;upload&#39;], function () {
            var form = layui.form,
            upload = layui.upload;            var demoListView = $(&#39;#demoList&#39;)
                  , uploadListIns = upload.render({
                      elem: &#39;#testList&#39;
                    , url: &#39;/ModelList/uploadNodeAttributeFile?filetype=&#39; + FileType + &#39;&modelid=&#39; + ModelId + &#39;&nodeid=&#39; + NodeId + &#39;&productid=&#39; + ProductId
                    , accept: &#39;file&#39;
                    , multiple: true
                    , auto: false
                    , bindAction: &#39;#testListAction&#39;
                    , choose: function (obj) {
                        var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                        //读取本地文件
                        obj.preview(function (index, file, result) {
                            var tr = $([&#39;<tr id="upload-&#39; + index + &#39;">'
                          , '<td>' + file.name + '</td>'
                          , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                          , '<td>等待上传</td>'
                          , '<td>'
                            , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                            , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                          , '</td>'
                        , '</tr>'].join(''));                            //单个重传
                            tr.find('.demo-reload').on('click', function () {
                                obj.upload(index, file);
                            });                            //删除
                            tr.find('.demo-delete').on('click', function () {
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            });

                            demoListView.append(tr);
                        });
                    }
                    , done: function (res, index, upload) {
                        if (res.Status == "success") {                            var tr = demoListView.find('tr#upload-' + index), tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');                            return null;
                        } else {                            if (res.Message == "文件已存在") {                                var tr = demoListView.find('tr#upload-' + index), tds = tr.children();
                                tds.eq(2).html('<span style="color: #5FB878;">上传失败，文件已存在</span>');                                return null;
                            } else {                                this.error(index, upload);
                            }
                        }

                    }
                    , error: function (index, upload) {
                        var tr = demoListView.find('tr#upload-' + index)
                      , tds = tr.children();
                        tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                    }
                  });
        });        function heightTiao(nameid) {
            var oIframe = window.top.document.getElementById(nameid);            var oBody = document.getElementsByTagName("body")[0];
            oIframe.style.height = oBody.offsetHeight + 40 + 'px';
        };    </script></body></html>

Copy after login

C#Backend receiving code

HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;string str1 = AppDomain.CurrentDomain.SetupInformation.ApplicationBase;string imgPath = "";string fileName = "";fileName = hfc[0].FileName;imgPath = Server.MapPath("~/bin/" + fileName);imgPath = Server.MapPath("~/bin/" + modelId + "/" + productid + "/" + nodeid + "/" + filetype + "/" + fileName);hfc[0].SaveAs(imgPath);return Content(new AjaxResult { Status = ResultType.success, Message = "执行成功" }.ToJson());

Copy after login

What you need to pay attention to during specific use is
auto: false
bindAction: '#testListAction'
These two This parameter is mainly set to not upload files when you select files, but to specify a button to perform the upload action.
Assuming that you need to perform the upload action when you select a file, you only need to set auto to true and remove bindAction. This parameter

Other parameters can refer to the layui official website documentation

There are many things that need to be judged when uploading files. I just record an example to facilitate your future use.

Related recommendations:

layui.js form verification function example sharing

detailed explanation of vue Alibaba Cloud upload component

Introduction to common methods of jQuery layui

The above is the detailed content of Share how to use layui upload component. For more information, please follow other related articles on the PHP Chinese website!