recherche

Maison >interface Web >js tutoriel >téléchargement de fichiers layui pour réaliser le partage de code

téléchargement de fichiers layui pour réaliser le partage de code

小云云
小云云original
2018-05-11 11:02:284061parcourir

Cet article présente principalement en détail le code d'implémentation de l'effet de barre de navigation layui. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/global.css">
  </head>
  <body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend>设定上传文件的格式</legend>
    </fieldset>

    <input type="file" name="file" class="layui-upload-file"> 
    <input type="file" name="file1" lay-type="file" class="layui-upload-file"> 
    <input type="file" name="file1" lay-type="audio" class="layui-upload-file"> 
    <input type="file" name="file2" lay-type="video" class="layui-upload-file"> 
    <blockquote class="layui-elem-quote" style="margin-top: 20px;">支持拖动文件上传</blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
      <legend>演示上传</legend>
    </fieldset>
    <p class="site-demo-upload">
      <img id="LAY_demo_upload" src="layui/images/tong.jpg">
      <p class="site-demo-upbar">
        <input type="file" name="file" class="layui-upload-file" id="test">
      </p>
    </p>

    <p style="margin-top: 20px;">注：由于服务器资源有限，所以此处每次给你返回的是同一张图片</p>

    <script src="layui/layui.js"></script>
    <script>
      layui.use(&#39;upload&#39;, function(){
        layui.upload({
        url: &#39;&#39; //上传接口
        ,success: function(res){ //上传成功后的回调
          console.log(res)
         }
      });

      layui.upload({
        url: &#39;/test/upload.json&#39;
        ,elem: &#39;#test&#39; //指定原始元素，默认直接查找class="layui-upload-file"
        ,method: &#39;get&#39; //上传接口的http类型
        ,success: function(res){
          LAY_demo_upload.src = res.url;
        }
      });

      });
    </script>
  </body>
</html>

Téléchargement de fichiers sur le site Web officiel

Recommandations associées :

jquery implémente une sélection déroulante de liens secondaires basée sur layui

Partagez comment LayUI implémente la fonction de pagination frontale

Explication détaillée de la façon dont layui.js implémente la fonction de vérification de formulaire

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!

jquery layui 表单验证 JS
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：Que faire en cas de conflits de bibliothèque jQueryArticle suivant：Que faire en cas de conflits de bibliothèque jQuery

Articles Liés

Voir plus