1. 程式人生 > 其它 >layui上傳檔案時做載入樣式和避免彈窗自動關閉

layui上傳檔案時做載入樣式和避免彈窗自動關閉

layer彈框,彈出後自動關閉

今天做專案,出現一個問題,需求是用ajax做檔案上傳功能,程式碼寫好之後,測試發現問題。

彈出層出現以後我沒有主動點選確定和關閉等操作,程式自動關閉了彈出層

一步一步排查,找到了錯誤,首先,先確認你頁面上有沒有發生重新整理或者其他彈出

我排查以後發現我form裡有個class,這個class就是ajax提交併返回彈出框,我把這個class

去掉以後測試還是不行,繼續排除,後來發現是button 的type問題,是button不是submit

<--前端程式碼-->
<form id="uploadForm" class="form-horizontal"  enctype="multipart/form-data">
    <input type="file" name="file" class="file" multiple="multiple" required="">
    <button type="button" id="upload" class="btn btn-xs btn-purple">
      <span class="ace-icon fa fa-cloud-upload icon-on-right bigger-110"></span>上傳檔案
  </button>
</form>
<--JS程式碼-->
<script type="text/javascript">
    $(function () {
        $('#upload').click(function () {
       //這裡我是需要做一個載入轉圈的效果,如不需要可去除 var index = layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 }); var formData = new FormData($('#uploadForm')[0]); $.ajax({ url:"www.baidu.com", type:'post', data:formData, dataType:'json', cache:false, processData: false, contentType: false, success:function (e) { layer.close(index); if (e.status == 200) { layer.alert(e.msg, { icon: 1, skin: 'layer-ext-moon' }) }else { layer.alert(e.msg, { icon: 2, skin: 'layer-ext-moon' }) } } }); }); }); </script>