suchen

Heim >Web-Frontend >js-Tutorial >Laden Sie eine Laui-Datei hoch, um die Codefreigabe zu realisieren

Laden Sie eine Laui-Datei hoch, um die Codefreigabe zu realisieren

小云云
小云云Original
2018-05-11 11:02:284063Durchsuche

Dieser Artikel stellt hauptsächlich den Implementierungscode des Laui-Navigationsleisteneffekts vor. Er hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen. 

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

Offizieller Website-Datei-Upload

Verwandte Empfehlungen:

jquery implementiert die Dropdown-Auswahl für sekundäre Verknüpfungen basierend auf layui

Teilen Sie mit, wie LayUI die Front-End-Paging-Funktion implementiert

Detaillierte Erklärung, wielayui.js die Formularüberprüfungsfunktion implementiert

Das obige ist der detaillierte Inhalt vonLaden Sie eine Laui-Datei hoch, um die Codefreigabe zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery layui 表单验证 JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Was tun bei jQuery-Bibliothekskonflikten?Nächster Artikel：Was tun bei jQuery-Bibliothekskonflikten?

In Verbindung stehende Artikel

Mehr sehen