1.前提

• 必須同步提交 form 表單?
  
• Form 表單編碼方式 multipart/form-data?
  
• 提交方式必須為 post?
  
• 上傳文件對應 input type=”file” 元素要提供 name 屬性

2.一鍵上傳的原理

3.一鍵上傳的實現方法jQuery ocupload實現
下載地址:(該地址屬于國外網站,需要FQ才可訪問)http://code.google.com/p/ocupload/

導入 jquery.ocupload-1.1.2.js 到項目中

在頁面引入 ocupload.js
<!-- 導入jquery核心類庫 --> <script type="text/javascript" src="/bos_management/js/jquery-1.8.3.js"></script> <!-- 導入ocupload核心類庫 --> <script type="text/javascript" src="/bos_management/js/jquery.ocupload-1.1.2.js"></script>441<!-- 導入jquery核心類庫 -->2<script type="text/javascript" src="/bos_management/js/jquery-1.8.3.js"></script>3<!-- 導入ocupload核心類庫 -->4<script type="text/javascript" src="/bos_management/js/jquery.ocupload-1.1.2.js"></script>
為導入的按鈕添加一鍵上傳的效果?$("#button-import").upload({//文件上傳的路徑action: '/bos_management/area_batchImport',onSelect: function() {//選擇文件后,關閉自動提交this.autoSubmit = false;//獲得文件名var filename = this.filename();//判斷文件格式var regex = /^.*\.(xls|xlsx)$/;if(regex.test(filename)) {this.submit();} else {$.messager.alert("警告", "請選擇后綴名為xls或xlsx的文件", "warning");}},//回調函數onComplete: function(response) {window.location.href = "/bos_management/pages/base/area.html";} });211$("#button-import").upload({2 ? ?//文件上傳的路徑3 ? ?action: '/bos_management/area_batchImport',4 ? ?onSelect: function() {5 ? ? ? ?//選擇文件后,關閉自動提交6 ? ? ? ?this.autoSubmit = false;7 ? ? ? ?//獲得文件名8 ? ? ? ?var filename = this.filename();9 ? ? ? ?//判斷文件格式10 ? ? ? ?var regex = /^.*\.(xls|xlsx)$/;11 ? ? ? ?if(regex.test(filename)) {12 ? ? ? ? ? ?this.submit();13 ? ? ? } else {14 ? ? ? ? ? ?$.messager.alert("警告", "請選擇后綴名為xls或xlsx的文件", "warning");15 ? ? ? }16 ? },17 ? ?//回調函數18 ? ?onComplete: function(response) {19 ? ? ? ?window.location.href = "/bos_management/pages/base/area.html";20 ? }21});


來自為知筆記(Wiz)

附件列表

?

轉載于:https://www.cnblogs.com/zhaoxuan734/p/8745834.html

總結

以上是生活随笔為你收集整理的ocupload完成文件上传(一键上传)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。