ace input file 上傳

1、定義一個  彈出dialog   

<div class="form-group">
   <form id="addForm" action="" enctype="multipart/form-data">
      <label class="col-sm-2 control-label text-right"><b class="red">*</b>附件：</label>

      <div class="col-xs-10">
         <!-- #section:custom/file-input -->
         <div class="col-sm-6">
            <%--注意： form 必須設置為 enctype="multipart/form-data" 否則無法識別問文件上傳;不使用該控件的時候不設置也可以--%>
            <input type="file" id="id-input-file" name="file"/>
         </div>
         <div class="  col-sm-6">
            <a id="downLoadTemplateId" class="btn btn-info btn-minier btn-success" style="line-height: 23px" href="">
               <i class="ace-icon fa fa-download"></i>模版下載
            </a>
         </div>
      </div>
      <div class="form-group row" id="fileDiv">
         <input name="fileName" id="file-name" type="hidden" >
         <input name="fileUrl" id="file-url" type="hidden">
         <input name="fileSize" id="file-size" type="hidden">
      </div>
   </form>
</div>

 

 

 

2、js 進行初始化

  $('#id-input-file').ace_file_input({
         no_file:'沒有選擇文件',
         btn_choose:'選擇',
         btn_change:'更改',
         icon_remove:null,
         droppable:false,
         thumbnail:false,//| true | large
//            whitelist:'gif|png|jpg|jpeg', //黑白名單並沒有起作用
         allowExt: ['xls','xlsx'],    //該屬性只是對文件后綴的控制
         before_change: function(files, dropped){
            //選擇文件 展示之前的事件
            //return true 保留當前文件; return false 不保留文件；return -1 重置文件框
            //需要同步等待返回結果
            uploadjs.upload('addForm',setFileUrl,'id-input-file',"");
            return true;
         }
      }).on('file.error.ace', function(event, info) {
         nsDialog.jAlert("請上傳excel格式文件","提示");
      });