moxunpw
/
layui_toolnb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982
							 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>镜像站@图片/文件上传模块文档 - Layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <script>
  ;!function(){self!==parent&&(location.href="http://www.baidu.com/")}();
  </script>
  <link rel="stylesheet" href="/public/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css?t=1632428048260"  media="all">
  <link rel="stylesheet" href="/public/static/css/global.css" tppabs="http://res.layui.com/static/css/global.css?t=1632428048260-19" media="all">
</head>
<body>


<div class="layui-header header header-doc" autumn>
  <div class="layui-container">
    <a class="logo" href="../../index.html" tppabs="http://www.layui.com/">
      <img src="/public/static/images/layui/logo.png" tppabs="http://res.layui.com/static/images/layui/logo.png" alt="layui">
    </a>
    <div class="layui-form layui-hide-xs component" lay-filter="LAY-site-header-component"></div>
    <div class="layui-hide-xs site-notice"></div>
    
    <ul class="layui-nav" id="LAY_NAV_TOP">
      <li class="layui-nav-item layui-this">
        <a href="../index.html" tppabs="http://www.layui.com/doc/">文档</a>
      </li>
      <li class="layui-nav-item ">
        <a href="../../demo/index.html" tppabs="http://www.layui.com/demo/">示例</a>
      </li>
      
      <li class="layui-nav-item">
        <a href="javascript:;">
          <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
          周边
        </a>
        <dl class="layui-nav-child layui-nav-child-c">  
          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
            <a href="https://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">问题反馈</a>
            <hr>
          </dd>
          
          <dd lay-unselect><a href="../../alone.html" tppabs="http://www.layui.com/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
          <dd lay-unselect><a href="../../../fly.layui.com/extend/index.html" target="_blank">扩展组件</a></dd>
        </dl>
      </li>
      
      <li class="layui-nav-item layui-hide-xs">
        <a href="http://gitee.com/sentsin/layui/issues" target="_blank" rel="nofollow">反馈</a>
      </li>
    </ul>
  </div>
</div>
 
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="../../../other/html5shiv/r29/html5.min.js" tppabs="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="../../../other/respond.js/1.4.2/respond.min.js" tppabs="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<ul class="site-dir">
  <li><a href="#use"><cite>快速使用</cite></a></li>
  <li>
    <a href="#options">
      <cite>基础参数选项</cite>
    </a>
  </li>
  <li><a href="#api"><cite>上传接口</cite></a></li>
  
  <li><a href="#choose"><cite>回调</cite></a></li>
  <ul style="margin-left: 15px;">
    <li><a href="#choose"><cite>选择文件的回调</cite></a></li>
    <li><a href="#before"><cite>上传前的回调</cite></a></li>
    <li><a href="#done"><cite>请求成功的回调</cite></a></li>
    <li><a href="#error"><cite>请求失败的回调</cite></a></li>
    <li><a href="#allDone"><cite>多文件上传回调</cite></a></li>
    <li><a href="#progress"><cite>上传进度的回调</cite> <span class="layui-badge-dot"></span></a></li>
  </ul>
  
  <li><a href="#reload"><cite>重载实例</cite> <span class="layui-badge-dot"></span></a></li>
  <li><a href="#reUpload"><cite>重新上传</cite></a></li>
  <li><a href="#corsUpload"><cite>跨域上传</cite></a></li>
</ul>
<div class="layui-container layui-row">
  
<div class="layui-col-md3">
  <div class="layui-panel site-menu">
    <ul class="layui-menu layui-menu-lg">
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          基础说明
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../index.html" tppabs="http://www.layui.com/doc/">
                <span>开始使用 </span> 
                <span class="layui-font-12 layui-font-gray">Getting Started</span>
              </a>
              
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/infrastructure.html" tppabs="http://www.layui.com/doc/base/infrastructure.html">
                <span>底层方法 </span>
                <span class="layui-font-12 layui-font-gray">基础支撑</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/element.html" tppabs="http://www.layui.com/doc/base/element.html">
                <span>页面元素 </span>
                <span class="layui-font-12 layui-font-gray">规范 公共类 属性</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/modules.html" tppabs="http://www.layui.com/doc/base/modules.html">
                <span>模块规范 </span>
                <span class="layui-font-12 layui-font-gray">使用 扩展</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/faq.html" tppabs="http://www.layui.com/doc/base/faq.html">
                <span>常见问题 </span>
                <span class="layui-font-12 layui-font-gray">FAQ</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../base/changelog.html" tppabs="http://www.layui.com/doc/base/changelog.html">
                <span>更新日志 </span>
                <span class="layui-font-12 layui-font-gray">changelog</span>
                
                  <span class="layui-badge-dot"></span>
                
              </a>
            </div>
          </li>
        </ul>
      </li>
      
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          页面元素
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/layout.html" tppabs="http://www.layui.com/doc/element/layout.html">
                <span>布局 </span>
                <span class="layui-font-12 layui-font-gray">栅格 后台管理布局</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/color.html" tppabs="http://www.layui.com/doc/element/color.html">
                <span>颜色 </span>
                <span class="layui-font-12 layui-font-gray">主色调 颜色搭配</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/icon.html" tppabs="http://www.layui.com/doc/element/icon.html">
                <span>图标 </span>
                <span class="layui-font-12 layui-font-gray">iconfont 字体图标</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/anim.html" tppabs="http://www.layui.com/doc/element/anim.html">
                <span>动画 </span>
                <span class="layui-font-12 layui-font-gray">内置 CSS3 动画</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/button.html" tppabs="http://www.layui.com/doc/element/button.html">
                <span>按钮 </span>
                <span class="layui-font-12 layui-font-gray">button</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/form.html" tppabs="http://www.layui.com/doc/element/form.html">
                <span>表单 </span>
                <span class="layui-font-12 layui-font-gray">form 元素集合</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/nav.html" tppabs="http://www.layui.com/doc/element/nav.html">
                <span>导航 </span>
                <span class="layui-font-12 layui-font-gray">nav 面包屑</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/menu.html" tppabs="http://www.layui.com/doc/element/menu.html">
                <span>菜单 </span>
                <span class="layui-font-12 layui-font-gray">menu 基础菜单</span>
                
                  <span class="layui-badge-dot"></span>
                
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/tab.html" tppabs="http://www.layui.com/doc/element/tab.html">
                <span>选项卡 </span>
                <span class="layui-font-12 layui-font-gray">Tabs 切换</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/progress.html" tppabs="http://www.layui.com/doc/element/progress.html">
                <span>进度条 </span>
                <span class="layui-font-12 layui-font-gray">progress</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/panel.html" tppabs="http://www.layui.com/doc/element/panel.html">
                <span>面板 </span>
                <span class="layui-font-12 layui-font-gray">panel 卡片 折叠</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/table.html" tppabs="http://www.layui.com/doc/element/table.html">
                <span>表格 </span>
                <span class="layui-font-12 layui-font-gray">静态 table</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/badge.html" tppabs="http://www.layui.com/doc/element/badge.html">
                <span>徽章 </span>
                <span class="layui-font-12 layui-font-gray">小圆点  小边框</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/timeline.html" tppabs="http://www.layui.com/doc/element/timeline.html">
                <span>时间线 </span>
                <span class="layui-font-12 layui-font-gray">timeline</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="../element/auxiliar.html" tppabs="http://www.layui.com/doc/element/auxiliar.html">
                <span>辅助 </span>
                <span class="layui-font-12 layui-font-gray">引用 字段集 横线等</span>
              </a>
            </div>
          </li>
        </ul>
      </li>
      
      <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
        <div class="layui-menu-body-title">
          内置模块
        </div>
        <hr>
        <ul>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="layer.html" tppabs="http://www.layui.com/doc/modules/layer.html">
                <span>弹出层 </span>
                <span class="layui-font-12 layui-font-gray">layer</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laydate.html" tppabs="http://www.layui.com/doc/modules/laydate.html">
                <span>日期与时间选择 </span>
                <span class="layui-font-12 layui-font-gray">laydate</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laypage.html" tppabs="http://www.layui.com/doc/modules/laypage.html">
                <span>分页 </span>
                <span class="layui-font-12 layui-font-gray">laypage</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="laytpl.html" tppabs="http://www.layui.com/doc/modules/laytpl.html">
                <span>模板引擎 </span>
                <span class="layui-font-12 layui-font-gray">laytpl</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="table.html" tppabs="http://www.layui.com/doc/modules/table.html">
                <span>数据表格 </span>
                <span class="layui-font-12 layui-font-gray">table</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="form.html" tppabs="http://www.layui.com/doc/modules/form.html">
                <span>表单 </span>
                <span class="layui-font-12 layui-font-gray">form</span>
              </a>
            </div>
          </li>
          <li class="layui-menu-item-checked2">
            <div class="layui-menu-body-title">
              <a href="upload.html" tppabs="http://www.layui.com/doc/modules/upload.html">
                <span>文件上传 </span>
                <span class="layui-font-12 layui-font-gray">upload</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="dropdown.html" tppabs="http://www.layui.com/doc/modules/dropdown.html">
                <span>下拉菜单 </span>
                <span class="layui-font-12 layui-font-gray">dropdown</span>
                
                  <span class="layui-badge-dot"></span>
                
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="transfer.html" tppabs="http://www.layui.com/doc/modules/transfer.html">
                <span>穿梭框 </span>
                <span class="layui-font-12 layui-font-gray">transfer</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="tree.html" tppabs="http://www.layui.com/doc/modules/tree.html">
                <span>树形组件 </span>
                <span class="layui-font-12 layui-font-gray">tree</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="colorpicker.html" tppabs="http://www.layui.com/doc/modules/colorpicker.html">
                <span>颜色选择器 </span>
                <span class="layui-font-12 layui-font-gray">colorpicker</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="element.html" tppabs="http://www.layui.com/doc/modules/element.html">
                <span>常用元素操作 </span>
                <span class="layui-font-12 layui-font-gray">element</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="slider.html" tppabs="http://www.layui.com/doc/modules/slider.html">
                <span>滑块 </span>
                <span class="layui-font-12 layui-font-gray">slider</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="rate.html" tppabs="http://www.layui.com/doc/modules/rate.html">
                <span>评分 </span>
                <span class="layui-font-12 layui-font-gray">rate</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="carousel.html" tppabs="http://www.layui.com/doc/modules/carousel.html">
                <span>轮播 </span>
                <span class="layui-font-12 layui-font-gray">carousel</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="layedit.html" tppabs="http://www.layui.com/doc/modules/layedit.html">
                <span>富文本编辑器 </span>
                <span class="layui-font-12 layui-font-gray">layedit</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="flow.html" tppabs="http://www.layui.com/doc/modules/flow.html">
                <span>流加载 </span>
                <span class="layui-font-12 layui-font-gray">flow</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="util.html" tppabs="http://www.layui.com/doc/modules/util.html">
                <span>工具组件 </span>
                <span class="layui-font-12 layui-font-gray">util</span>
              </a>
            </div>
          </li>
          <li class="">
            <div class="layui-menu-body-title">
              <a href="code.html" tppabs="http://www.layui.com/doc/modules/code.html">
                <span>代码高亮显示 </span>
                <span class="layui-font-12 layui-font-gray">code</span>
              </a>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="layui-hide-v"> - </div>
</div>

  
  <div class="layui-col-md9 site-content">
    <h1 class="site-h1"><i class="layui-icon">&#xe62f;</i> 图片/文件上传 - layui.upload</h1>
    <div class="site-tips site-text">
      <p>上传模块自 layui 2.0 的版本开始，进行了全面重写，这使得它不再那么单一，它所包含的不仅是更为强劲的功能，还有灵活的 UI。任何元素都可以作为上传组件来调用，譬如按钮、图片、普通的 DIV 等等，而不再是一个单调的 file 文件域。</p>
    </div>
    <div class="site-tips site-text">
      <p>模块加载名称：<em>upload</em></p>
    </div>
    
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="use">快速使用</a></legend>
    </fieldset>
    <div class="site-text">
      <p>一切从小试牛刀开始。通常情况下，我们上传文件是借助 type="file" 的 input 标签来完成的，但非常遗憾的是，它不能很好地与其它表单元素并存，所以我们常常要单独为它做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。下面是一个小示例：</p>
      
      <p>
        <button type="button" class="layui-btn" id="test1">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
      </p>
      <p>这原本只是一个普通的 button，正是 upload 模块赋予了它“文件选择”的特殊技能。当然，你还可以随意定制它的样式，而不是只局限于按钮。</p>  
      <pre class="layui-code" lay-title="对应的代码">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;upload模块快速使用&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;/static/build/layui.css&quot; media=&quot;all&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
 
&lt;button type="button" class="layui-btn" id="test1">
  &lt;i class="layui-icon">&amp;#xe67c;&lt;/i>上传图片
&lt;/button>
 
&lt;script src=&quot;/static/build/layui.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
layui.use(&#x27;upload&#x27;, function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
      <p>一切看起来是那样的简单，乃至于我不得不凑一段文字来填充这一行的版面。这样好像与下文衔接起来会比较谐调的样子（自我感觉）</p>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="options">核心方法与基础参数选项</a></legend>
    </fieldset>
    <div class="site-text">
      <p>使用 upload 模块必须与 <em>upload.render(options)</em> 方法打交道，其中的 <em>options</em>即为基础参数，它是一个对象。</p>
      <pre class="layui-code">
var upload = layui.upload; //得到 upload 对象
 
//创建一个上传组件
upload.render({
  elem: '#id'
  ,url: ''
  ,done: function(res, index, upload){ //上传后的回调
  
  } 
  //,accept: 'file' //允许上传的文件类型
  //,size: 50 //最大允许上传的文件大小
  //,……
})
      </pre>
      <p>从 layui 2.1.0 开始，允许你直接在元素上设定基础参数，如：</p>
      <pre class="layui-code">
【HTML】
&lt;button class="layui-btn test" lay-data="{url: '/a/'}"&gt;上传图片&lt;/button&gt;
&lt;button class="layui-btn test" lay-data="{url: '/b/', accept: 'file'}"&gt;上传文件&lt;/button&gt;
 
【JS】
upload.render({
  elem: '.test'
  ,done: function(res, index, upload){
    //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
    var item = this.item;
  }
})
      </pre>
      <p>更多支持的参数详见下表，合理的配置它们，应对各式各样的业务需求。<p>
      <table class="layui-table">
      <colgroup>
        <col width="120">
        <col>
        <col width="120">
        <col width="200">
      </colgroup>
      <thead>
        <tr>
          <th>参数选项</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr> 
      </thead>
      <tbody>
        <tr>
          <td>elem</td>
          <td>指向容器选择器，如：elem: '#id'。也可以是DOM对象</td>
          <td>string/object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>url</td>
          <td>服务端上传接口，返回的数据规范请详见下文</td>
          <td>string</td>
          <td>-</td>
        </tr>
        <!--<tr>
          <td>method</td>
          <td>上传接口的 HTTP 类型</td>
          <td>string</td>
          <td>post</td>
        </tr>-->
        <tr>
          <td>data <a name="data"></a></td>
          <td>请求上传接口的额外参数。如：data: {id: 'xxx'}
            <br> 从 layui 2.2.6 开始，支持动态值，如:
            <pre class="layui-code">
data: {
  id: function(){
    return $('#id').val();
  }
}
            </pre>
          </td>
          <td>object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>headers</td>
          <td>接口的请求头。如：<em>headers: {token: 'sasasas'}</em>。注：该参数为 layui 2.2.6 开始新增</td>
        </tr>
        <tr>
          <td>accept</td>
          <td>指定允许上传时校验的文件类型，可选值有：<em>images</em>（图片）、<em>file</em>（所有文件）、<em>video</em>（视频）、<em>audio</em>（音频）</td>
          <td>string</td>
          <td>images</td>
        </tr>
        <tr>
          <td>acceptMime <a name="acceptMime"></a></td>
          <td>规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如：
          <br><em>acceptMime: 'image/*'</em>（只显示图片文件）
          <br><em>acceptMime: 'image/jpg, image/png'</em>（只显示 jpg 和 png 文件）
          <br><span style="color: #FF5722;">注：该参数为 layui 2.2.6 开始新增</span></td>
          <td>string</td>
          <td>images</td>
        </tr>
        <tr>
          <td>exts</td>
          <td>允许上传的文件后缀。一般结合 <em>accept</em> 参数类设定。假设 accept 为 file 类型时，那么你设置 <em>exts: 'zip|rar|7z'</em> 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式</td>
          <td>string</td>
          <td>jpg|png|gif|bmp|jpeg</td>
        </tr>
        <tr>
          <td>auto</td>
          <td>是否选完文件后自动上传。如果设定 <em>false</em>，那么需要设置 <em>bindAction</em> 参数来指向一个其它按钮提交上传</td>
          <td>boolean</td>
          <td>true</td>
        </tr>
        <tr>
          <td>bindAction</td>
          <td>指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'</td>
          <td>string/object</td>
          <td>-</td>
        </tr>
        <tr>
          <td>field</td>
          <td>设定文件域的字段名</td>
          <td>string</td>
          <td>file</td>
        </tr>
        <tr>
          <td>size</td>
          <td>设置文件最大可允许上传的大小，单位 KB。不支持ie8/9</td>
          <td>number</td>
          <td>0（即不限制）</td>
        </tr>
        <tr>
          <td>multiple</td>
          <td>是否允许多文件上传。设置 <em>true</em>即可开启。不支持ie8/9</td>
          <td>boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>number</td>
          <td>设置同时可上传的文件数量，一般配合 multiple 参数出现。<br>注意：<em>该参数为 layui 2.2.3 开始新增</em></td>
          <td>number</td>
          <td>0（即不限制）</td>
        </tr>
        <tr>
          <td>drag</td>
          <td>是否接受拖拽的文件上传，设置 <em>false</em> 可禁用。不支持ie8/9</td>
          <td>boolean</td>
          <td>true</td>
        </tr>
        <tr><td colspan="4" style="text-align: center;">回调</td></tr>
        <tr>
          <td>choose</td>
          <td>选择文件后的回调函数。返回一个object参数，详见下文</td>
          <td>function</td>
          <td>-</td>
        </tr>
        <tr>
          <td>before</td>
          <td>文件提交上传前的回调。返回一个object参数（同上），详见下文</td>
          <td>function</td>
          <td>-</td>
        </tr>
        <tr>
          <td>done</td>
          <td>执行上传请求后的回调。返回三个参数，分别为：<em>res</em>（服务端响应信息）、<em>index</em>（当前文件的索引）、<em>upload</em>（重新上传的方法，一般在文件上传失败后使用）。详见下文</td>
          <td>function</td>
          <td>-</td>
        </tr>
        <tr>
          <td>error</td>
          <td>执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：<em>index</em>（当前文件的索引）、<em>upload</em>（重新上传的方法）。详见下文</td>
          <td>function</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="api">上传接口</a></legend>
    </fieldset>
    <div class="site-text">
      <p>设定一个 URL 地址给 <em>url</em> 参数，用来告诉 upload 模块的服务端上传接口。像你平时使用Ajax一样。如：</p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/' //必填项
  ,method: ''  //可选项。HTTP类型，默认post
  ,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
});      
      </pre>
      <p>该接口返回的相应信息（response）必须是一个标准的 JSON 格式，如：</p>
      <pre class="layui-code" lay-title="Response" lay-skin="notepad">
{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/123.jpg"
  }
}       
      </pre>
      <p style="color: #FF5722;">
        注意1：你不一定非得按照上述格式返回，只要是合法的 JSON 字符即可。其响应信息会转化成JS对象传递给 <em>done</em> 回调。
        <br>注意2：如果上传后，出现文件下载框（一般为ie下），那么你需要在服务端对response的header设置 <em>Content-Type: text/html</em>
      </p>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="choose">选择文件的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在文件被选择后触发，该回调会在 before 回调之前。一般用于非自动上传（即 <em>auto: false</em> ）的场景，比如预览图片等。</p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,auto: false //选择文件后不自动上传
  ,bindAction: '#testListAction' //指向一个按钮触发上传
  ,choose: function(obj){
    //将每次选择的文件追加到文件队列
    var files = obj.pushFile();
    
    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
    obj.preview(function(index, file, result){
      console.log(index); //得到文件索引
      console.log(file); //得到文件对象
      console.log(result); //得到文件base64编码，比如图片
      
      //obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
      
      //这里还可以做一些 append 文件列表 DOM 的操作
      
      //obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
      //delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
    });
  }
});      
      </pre>
      <p>事实上这是一个非常实用的存在，可轻松应对复杂的列表文件上传管理。具体可移步到 示例 页面，里面有一个文件列表的小例子。</p>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="before">文件上传前的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在 <em>choose</em> 回调之后、<em>done/error</em> 回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。</p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
    layer.load(); //上传loading
  }
  ,done: function(res, index, upload){
    layer.closeAll('loading'); //关闭loading
  }
  ,error: function(index, upload){
    layer.closeAll('loading'); //关闭loading
  }
});      
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="done">上传接口请求成功的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在上传接口请求完毕后触发，但文件不一定是上传成功的，只是接口的响应状态正常（200）。回调返回三个参数，分别为：<em>服务端响应信息</em>、<em>当前文件的索引</em>、<em>重新上传的方法</em></p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,done: function(res, index, upload){
    //假设code=0代表上传成功
    if(res.code == 0){
      //do something （比如将res返回的图片链接保存到表单的隐藏域）
    }
    
    //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
    var item = this.item;
    
    //文件保存失败
    //do something
  }
});      
      </pre>
    </div>
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="error">上传请求失败的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>当请求上传时出现异常时触发（如网络异常、404/500等）。回调返回两个参数，分别为：<em>当前文件的索引</em>、<em>重新上传的方法</em></p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,error: function(index, upload){
    //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
  }
});      
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="allDone">多文件上传完毕后的状态回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>只有当开启多文件时（即 multiple: true），该回调才会被触发。回调返回一个 object 类型的参数，包含一些状态数据：</p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,multiple: true
  ,allDone: function(obj){ //当文件全部被提交后，才触发
    console.log(obj.total); //得到总文件数
    console.log(obj.successful); //请求成功的文件数
    console.log(obj.aborted); //请求失败的文件数
  }
  ,done: function(res, index, upload){ //每个文件提交一次触发一次。详见“请求成功的回调”
  
  }
});      
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="progress">文件上传进度的回调</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在网速一般的情况下，大文件的上传通常需要一定时间的等待，而浏览器并不会醒目地告知你它正在努力地上传中，此时为了提升用户体验，我们可以通过该回调制作一个进度条。<span style="color: #FF5722;">注：该回调为 layui 2.5.5 新增</span></p>
      <pre class="layui-code">
upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,progress: function(n, elem, res, index){
    var percent = n + '%' //获取进度百分比
    element.progress('demo', percent); //可配合 layui 进度条元素使用
    
    console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
    console.log(res); //得到 progress 响应信息
    console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：
    element.progress('demo-'+ index, n + '%'); //进度条
  }
});       
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="reload">重载实例</a></legend>
    </fieldset>
    <div class="site-text">
      <p>有时你可能需要对 <em>upload.render()</em> 实例进行重载，通过改变一些参数（如将上传文件重置为只上传图片等场景）来重置功能。如：</p>
      <pre class="layui-code">
//创建一个实例
var uploadInst = upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,size: 1024*5 //限定大小
});
 
//重载该实例，支持重载全部基础参数
uploadInst.reload({
  accept: 'images' //只允许上传图片
  ,acceptMime: 'image/*' //只筛选图片
  ,size: 1024*2 //限定大小
}); 
      </pre>
       <p>注意：<span style="color: #FF5722;">该方法为 layui 2.5.0 开始新增</span></p>
    </div>
    
   <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="reUpload">重新上传</a></legend>
    </fieldset>
    <div class="site-text">
      <p>在执行 <em>upload.render(options)</em> 方法时，其实有返回一个实例对象，以便对完成重新上传等操作。注意：这是对当前上传队列的全局重新上传，而 <em>choose</em> 回调返回的 <em>obj.upload(index, file)</em> 方法则是对单个文件进行重新上传。如：</p>
      <pre class="layui-code">
var uploadInst = upload.render({
  elem: '#id'
  ,url: '/api/upload/'
  ,choose: function(obj){
    obj.preview(function(index, file, result){
      //对上传失败的单个文件重新上传，一般在某个事件中使用
      //obj.upload(index, file);
    });
  }
});
 
//重新上传的方法，一般在某个事件中使用
//uploadInst.upload(); 
      </pre>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title site-title">
      <legend><a name="corsUpload">跨域上传</a></legend>
    </fieldset>
    <div class="site-text">
      <p>有些时候，可能会涉及到文件跨域操作，过去版本的 upload 模块最大的缺陷恰恰在于这里。而从 layui 2.0 的版本开始，我们已经对 跨域做了支持。但鉴于代码的冗余度等多方面考虑，在IE9以下版本环境中，仍然不支持跨域。其它所有版本的IE和Chrome/FireFox等高级浏览器均支持。</p>
      
      <p>那么，需要你怎么做？通常来说，是借助 <em>CORS（跨资源共享）</em> 方案，即对接口所在的服务器设置：<em>Access-Control-Allow-Origin</em> 详见Google，配置起来还是挺简单的。而至于域名限制，一般是服务端程序中去做处理。这里不做过多赘述。</p>
    </div>
    
    
  </div>
</div>
  

<div class="layui-footer footer footer-doc">
    <p>
      Copyright &copy; 2021 <a href="../../index.html" tppabs="http://www.layui.com/">「本站仅为 layui 文档保留的镜像站点，与官方无关」</a> MIT Licensed</p>
    <p>
      <a href="../../about/disclaimer.html" tppabs="http://www.layui.com/about/disclaimer.html" target="_blank">免责声明</a> 
      <a href="../../about/relatedlinks.html" tppabs="http://www.layui.com/about/relatedlinks.html" target="_blank">友链</a>
      <a href="javascript:;"  site-event="weixinmp">公众号</a>
      
      
    </p>
    
</div>
<script>
window.global = {
  pageType: 'doc'
  ,preview: function(){
    var preview = document.getElementById('LAY_preview');
    return preview ? preview.innerHTML : '';
  }()
};
</script>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
<div class="site-mobile-shade"></div>
 
<script src="/public/layui/dist/layui.js" tppabs="http://res.layui.com/layui/dist/layui.js?t=1632428048260" charset="utf-8"></script>
<script>
layui.config({
  base: '/public/static/lay/modules/layui/'
  ,version: '1632428048260'
}).use('global');
</script>
 

<script>
layui.use('upload', function(){
  var upload = layui.upload;
  
  //执行示例
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: '/upload/'
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>
</body>
</html>