fileinput事件

小鱼儿 2023-06-13 06:22 9阅读 0赞

本篇表格列举BootStrap的上传插件fileinput的部分事件，为了便于自己开发使用。[官网地址][Link 1]

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>描述</th> 
   <th>范例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fileerror</td> 
   <td><font>异步上传失败结果处理</font>,当上传文件客户端验证错误时，会触发此事件。它允许传入对象data作为参数。data：包含下面关键字的对象/关联数组：id：预览缩略图标识符id（如果不可用，则为undefined）；index：文件索引或者预览缩略图索引（如果不可用，则为undefined），file：文件对象（如果不可用，则为undefined），reader：文件读取器实例（如果不可用，则为undefined），files：文件堆数组（如果不可用，则为undefined）。msg：字符串，生成的错误信息</td> 
   <td>$(’#input-id’).on(‘fileerror’, function(event, data, msg) { console.log(data.id);console.log(data.index);console.log(data.file);console.log(data.reader);console.log(data.files);// 获取信息alert(msg);});</td> 
  </tr> 
  <tr> 
   <td>fileuploaded</td> 
   <td>此事件仅在ajax上传且上载每个缩略图文件之后触发。此事件只有是AJAX上传并在以下场景才会触发：当单击每个预览缩略图中的上传图标并且文件上传成功时，或者当你将uploadAsync设置为true并且已触发批量上传时。在这种情况下，fileuploaded事件在每个单独的选定文件成功上传之后被触发。<font>即异步上传成功结果处理。</font></td> 
   <td>$(’#input-id’).on(‘fileuploaded’, function(event, data, previewId, index) {var form = data.form, files = data.files, extra = data.extra,response = data.response, reader = data.reader;console.log(‘File uploaded triggered’);});</td> 
  </tr> 
  <tr> 
   <td>filebatchuploaderror</td> 
   <td>此事件仅在ajax上传时触发，并且同步批量上传面临上传验证错误之后。此事件仅针对ajax上传并在以下情况下触发：当您将uploadAsync设置为false并且已触发批量上传时。在这种情况下，在任何文件面临上载错误或者你通过服务器操作JSON响应返回错误后触发filebatchuploaderror事件。<font>即同步上传错误结果处理。</font></td> 
   <td>$(’#input-id’).on(‘filebatchuploaderror’, function(event, data, msg) {var form = data.form, files = data.files, extra = data.extra,response = data.response, reader = data.reader;console.log(‘File batch upload error’); // 获取信息 alert(msg);});</td> 
  </tr> 
  <tr> 
   <td>filebatchuploadsuccess</td> 
   <td>此事件仅在ajax上传且文件批量上传成功之后触发。此事件只有是AJAX上传并在以下场景才会触发：当你将uploadAsync设置为false并且已经触发了批量上传时。 在这种情况下，在所以文件成功上传后会触发filebatchuploadsuccess事件 <font>即同步上传成功结果处理。</font>。</td> 
   <td>$(’#input-id’).on(‘filebatchuploadsuccess’, function(event, data, previewId, index) {var form = data.form, files = data.files, extra = data.extra,response = data.response, reader = data.reader;console.log(‘File batch upload success’);});</td> 
  </tr> 
  <tr> 
   <td>filebatchselected</td> 
   <td>在预览中选择并显示一批文件后触发此事件。附加参数有：files：文件对象实例（如果FileReader不可用，则为空对象）</td> 
   <td>$(’#input-id’).on(‘filebatchselected’, function(event, files) {console.log(‘File batch selected triggered’);});</td> 
  </tr> 
  <tr> 
   <td>upload</td> 
   <td>文件上传方法</td> 
   <td>$("#input-id").fileinput(“upload”);</td> 
  </tr> 
  <tr> 
   <td>filebatchuploadcomplete</td> 
   <td>所有文件上传成功后执行，执行时机在fileuploaded后,此事件仅对于ajax上传且完成同步或异步ajax批量上传后触发。附加参数有：files：数组，文件栈数组（如果不可用，则为空对象）。extra：该插件的uploadExtraData设置（如果不可用，则为空对象）。</td> 
   <td>$(’#input-id’).on(‘filebatchuploadcomplete’, function(event, files, extra) {console.log(‘File batch upload complete’);});</td> 
  </tr> 
  <tr> 
   <td>filepredelete</td> 
   <td>在删除initialPreview内容集中的每个缩略图文件之前触发此事件。附加参数有：key：要删除的已选文件在initialPreviewConfig中传入的关键字。jqXHR：用于此事务的jQuery XMLHttpRequest对象（如果可用）。data：输出deleteExtraData对象。</td> 
   <td>$(’#input-id’).on(‘filepredelete’, function(event, key) { console.log('Key = ’ + key);});</td> 
  </tr> 
  <tr> 
   <td>filesuccessremove</td> 
   <td>使用缩略图删除按钮删除成功上传的缩略图后，会触发此事件。当showUploadedThumbs设置为true时，这通常是适用的。附加参数有：id：缩略图HTML容器节点的id属性。</td> 
   <td>$(’#input-id’).on(‘filesuccessremove’, function(event, id) {if (some_processing_function(id)) {console.log(‘Uploaded thumbnail successfully removed’); } else {return false; // 缩略图删除中断}});</td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: http://www.bootstrap-fileinput.com/events.html