recherche

Maison >interface Web >js tutoriel >Partagez comment utiliser le composant de téléchargement layui

Partagez comment utiliser le composant de téléchargement layui

小云云
小云云original
2018-03-05 16:42:262224parcourir

Cet article explique principalement comment utiliser le composant de téléchargement layui. Tout d'abord, collez le code frontal. J'espère que cela pourra aider tout le monde. 

<!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>

Code de réception du backend C#

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());

Ce à quoi vous devez faire attention lors d'une utilisation spécifique est
auto: false
bindAction: '#testListAction '
Ces deux paramètres sont principalement définis pour ne pas télécharger le fichier lorsque vous sélectionnez le fichier, mais pour spécifier un bouton pour effectuer l'action de téléchargement
En supposant que l'action de téléchargement doit être effectuée lorsque vous devez sélectionner le fichier , il vous suffit de définir auto sur true et de supprimer le paramètre bindAction

Pour les autres paramètres, veuillez vous référer au document du site officiel de layui

De nombreux jugements sont nécessaires pour télécharger des fichiers. J'enregistre juste un exemple pour faciliter mon utilisation future.

Recommandations associées :

Partage d'exemples de fonction de vérification de formulaire layui.js

Explication détaillée du composant de téléchargement vue Alibaba Cloud

Introduction aux méthodes courantes de jQuery layui

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comparaison entre table, CSS et divArticle suivant：Comparaison entre table, CSS et div

Articles Liés

Voir plus