分享一個HTML 5的上傳jQuery插件:jQuery HTML5 uploader

2021-01-08 51CTO
分享一個HTML 5的上傳jQuery插件:jQuery HTML5 uploader

隨著HTML5的使用越來越被大家接受，基於HTML5的技術和插件也會變得越來越廣泛，今天我們介紹一款基於HTML5和jQuery的上傳插件: jQuery HTML5 uploader。

作者：GBin1.com來源：GBin1.com|2011-11-18 16:09

隨著HTML5的使用越來越被大家接受，基於HTML5的技術和插件也會變得越來越廣泛，今天我們介紹一款基於HTML5和jQuery的上傳插件: jQuery HTML5 uploader。

使用這個插件將會使得文件上傳變得簡單和有趣，你只需要拖拽文件到頁面特定區域就可以上傳文件。

在線演示  在線下載

使用方法：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.html5uploader.min.js"></script> <script type="text/javascript"> $(function() {      $("#dropbox, #multiple").html5Uploader({          name: "foo",          postUrl: "bar.aspx"          });  });  </script> <div id="dropbox"></div> <input id="multiple" type="file" multiple> 

參數設定：

◆ name: 上傳欄位標示

◆ postUrl: 文件數據處理URL

◆ onClientAbort: 讀取操作終止時調用

◆ onClientError: 出錯時調用

◆ onClientLoad: 讀取操作成功時調用

◆ onClientLoadEnd: 無論是否成功，讀取完成時調用。通常在onload和onerror後調用

◆ onClientLoadStart: 讀取將要開始時調用

◆ onClientProgress: 數據在讀取過程中周期性調用

◆ onServerAbort: post操作結束時調用

◆ onServerError: 錯誤發生時調用

◆ onServerLoad: post操作成功時調用

◆ onServerLoadStart: post數據將要開始時調用

◆ onServerProgress: 數據正在被post的過程中周期性調用

◆ onServerReadyStateChange: 一個javascript功能對象無論任何時候readyState屬性變化時調用。callback由用戶界面現成調用。

原文：http://www.cnblogs.com/gbin1/archive/2011/11/18/2254212.html

【編輯推薦】

15個值得開發者關注的jQuery開發技巧和心得 使用HTML 5、CSS3和jQuery增強網站用戶體驗 11月30個讓你網站更炫的jQuery插件推薦 JNotify：一個消息通知jQuery插件 10月10款有趣強大的jQuery插件推薦

【責任編輯：

陳貽新

TEL：（010）68476606】

點讚 0

相關焦點

  • 5款jQuery滾動效果插件
    jQuery滾動效果插件 WaypointsWaypoints 是一個 jQuery 用來實現捕獲各種滾動事件的插件，例如實現無翻頁的內容瀏覽，或者固定某個元素不讓滾動等等。支持主流瀏覽器版本。
  • jQuery對html的操作總結
    jquery操作html元素可以帶來更多的意想不到的動態效果，給網頁帶來更豐富的內容。但是，jquery的函數很多，要準確的找到自己需要的函數很不容易，所以小編就在這裡總結一下，方便自己，方便他人。第一個函數，添加html元素。
  • jQuery中使用text()、html()、val()方法對Html元素賦值和取值
    三、案例應用二（賦值）這裡獲取一個div元素，然後使用jQuery的text()方法給div元素賦值。運行結果如下：圖3三、案例應用二（賦值）再列舉一個案例，使用html()方法給div元素添加「<h2>謝謝！</h2>」。
  • 編寫jquery插件的分享
    作為一個前段程式設計師，肯定經常用到一些javascript插件吧，不得不承認，jquery是其中的比較優秀的插件之一，那麼我們有沒有想過我們自己也可以來封裝一個插件呢，下面我給大家分享一些方法，希望對大家有些幫助。
  • 分享20個漂亮強大的jQuery導航菜單
    現在很多導航菜單都搞的很花俏，如果你不喜歡花俏的話，可以嘗試根據下面這個教程去學習，去學習做一個如上圖的導航菜單，其風格是簡單而顯得冷色調。教程在http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html可以看到。
  • jQuery的attr()、append()、after()和before()方法操作HTML元素
    DOCTYPE html><html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.1.1.min.js"></script><
  • 分享一個超棒的響應式幻燈jQuery插件 - refineslide
    分享一個超棒的響應式幻燈jQuery插件 - refineslide jQuery的幻燈插件我們介紹過很多了，不過今天我們介紹的這個幻燈插件能夠幫助我們使用響應式的方式展示圖片幻燈
  • JQuery Tree插件——zTree v3.5.02 版 發布
    首先要告訴大家，在 jQuery 發布了插件註冊功能後，zTree 也已經發布到了 jQuery 的 Plugins 內，同時也在 Github 上進行了發布（不過近期敏感事件期間 github
  • 使用jQuery的remove()和empty()方法刪除Html元素及子元素和內容
    DOCTYPE html><html><head><title>一都編程</title> <script src="jquery-3.3.1.js"></script> <script type="text/javascript"> function f1() {
  • jquery 三級聯動插件專題及常見問題 - CSDN
    在開發工作中，有時候需要我們自己去手動開發一個插件，剛好我遇到了這樣的機會，也有時間去完成這個插件，所以就做了一個適合自己的項目的三級聯動下拉插件。
  • jquery與js的區別是什麼?js與jquery的用法區別介紹
    在學習js的時候我們肯定能夠接觸到jquery，那麼，js與jquery之間有什麼區別呢？本篇文章將給大家來分享關於jquery與js之間的區別比較，有需要的小夥伴可以參考一下，希望能夠幫助到你們。我們來簡單看一下jquery與js的概念。
  • jquery 社交分享插件專題及常見問題 - CSDN
    iShare 是一款令人驚詫的 jquery  分享和書籤插件。它有許多功能，比如說支持分享到社交網站，支持 shortcode，可選擇激活分享到哪些社交網站，另外還有其他許多可自定義的功能。一個用來創建社交媒體分享的 jQuery 插件。且能夠計算分享次數。6.
  • jquery 隱藏h2專題及常見問題 - CSDN
    解決方案 ：創建一個自定義jQuery插件。 演示：單擊「顯示」按鈕。 注意 這是替代解決方案– jQuery toggle（）函數。 最後，我們需要一個回調函數來使按鈕標籤變得「隱藏/顯示」。
  • 分享幾個html開發必備資源庫和在線工具
    html開發資源庫及工具1、svg圖標庫heropatterns 背景svg素材庫，豐富的背景素材，可以選擇顏色，透明度在線生成svgmaterialdesignicons 在線svg圖標庫，免費贈送350個svg圖標，可以直接下載使用2、png icon圖標庫iconfinder 豐富的icon png圖標下載庫，有收費與免費版本3、圖片資源庫unsplash 免費的圖片資源庫，此庫由眾多的圖片攝影愛好者上傳提供，可以免費使用
  • jquery開發無限滾動加載插件教程附源碼
    現在網上的無限滾動加載插件很多，但是他們是如何製作的呢？用到了什麼技術？現在就讓我來給大家揭曉一下吧：jquery無限滾動加載圖片展示思路解析：1、監聽滾動條是否到了頁面最底部。2、到了頁面最底部後當前的頁碼加1。3、將頁面傳遞給url的頁碼參數裡再獲取數據。
  • 使用jQuery中的siblings()方法查找當前html元素的全部同胞元素
    DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.3.1.js"></script><script
  • jQuery事件基本概念、給Html元素添加事件、文件中添加事件的使用
    如下例子給按鈕添加一個click事件，事件的功能是彈出一個警告框。jQuery代碼如下：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.1.1.min.js"></script><script
  • 一個幫助你處理延遲重複循環操作的jQuery插件 - timing
    在線演示   本地下載   在線調試如果需要你延遲5秒執行特定操作話，你肯定會想到使用類似setInterval（）或者delay（）的方法。在今天的這篇插件介紹中，我們將介紹一個超棒的jQuery插件，幫助你快速的使用鏈式和延遲代理模式來實現類似的效果。這個插件提供了簡單實用的方法來定義列舉，timeout，interval，延遲，並且使用基於時間的循環，僅僅使用數行就可以實現。如何使用？
  • 推薦超實用的8款jQuery插件
    推薦一款支持響應式的jQuery幻燈插件Glide.js 在線演示響應式設計絕對是最近兩年的大火設計方式，針對不同的設備都能很好的顯示內容，絕對對於我們這些前端攻城師來說是個天大的好消息，咱再也不用費勁的 在不同瀏覽器和設備上做兼容性的痛苦調試了，最近項目中使用了一個支持響應式的幻燈插件Glide.js，今天有空和諸位一起分享一下
  • jQuery.each()方法
    DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery.each()方法</title><script src="https://cdn.staticfile.org/jquery/1.10.2