2. 程式人生 > >Webuploader教程（一）------簡單實用上傳功能

Webuploader教程（一）------簡單實用上傳功能

阿新 • • 發佈：2018-12-31
webuplader是百度的一個前端開源上傳外掛，支援加密、分片上傳。還是闊以的。 不過文件寫的實在是不敢恭維，挫到爆，gettting start介紹快速開始，寫的都是缺少東西的，直接複製下來是不可以執行的。 總結出一個經驗，測試html最好還是使用jsp，不然修改了頁面，瀏覽器上總是有快取，清快取是個很蛋疼的事情。 1. 引如外部資源 css，js檔案   這裡${ctxStatic}不要管，這個只是spring專案中使用el表示式來寫靜態檔案字首了。使用的話，測試的話直接寫死絕對路即可。
  1. <spanstyle="font-size:14px;"><linkhref="${ctxStatic }/bootstrap-3.3.5-dist/css/bootstrap.min.css"type="text/css"rel="stylesheet"/>
  2.  <linkhref="${ctxStatic }/webupload/css/webuploader.css"type="text/css"
    rel="stylesheet"/>
  3.  <scripttype="text/javascript"src="${ctxStatic }/jquery/jquery-1.9.1.min.js"></script>
  4.  <scripttype="text/javascript"src="${ctxStatic }/webupload/webuploader.min.js"></script>
  5.  <scripttype="text/javascript"src="${ctxStatic }/bootstrap-3.3.5-dist/js/bootstrap.min.js"
    ></script></span>


2.寫容器DOM
用來放置webuploader的dom
  1. <spanstyle="font-size:14px;"><divid="uploader-demo">
  2.     <!--用來存放item-->
  3.     <divid="thelist"class="uploader-list"></div>
  4.     <div>
  5.      <divid="filePicker">選擇圖片</div>
  6.      <buttonid="ctlBtn"
    class="btn btn-default">開始上傳</button>
  7.     </div>
  8. </div>
  9. </span>
3. 初始化webuploader元件，設定上傳等事件監聽。
[javascript] view plain copy
  1. <span style="font-size:14px;"><script type="text/javascript">  
  2.   $(function(){  
  3.    /*init webuploader*/
  4.    var $list=$("#thelist");   //這幾個初始化全域性的百度文件上沒說明，好蛋疼。
  5.    var $btn =$("#ctlBtn");   //開始上傳
  6.    var thumbnailWidth = 100;   //縮圖高度和寬度 （單位是畫素），當寬高度是0~1的時候，是按照百分比計算，具體可以看api文件
  7.    var thumbnailHeight = 100;  
  8.    var uploader = WebUploader.create({  
  9.        // 選完檔案後，是否自動上傳。
  10.        auto: false,  
  11.        // swf檔案路徑
  12.        swf: '${ctxStatic }/webupload/Uploader.swf',  
  13.        // 檔案接收服務端。
  14.        server: '/apm-web/a/test/',  
  15.        // 選擇檔案的按鈕。可選。
  16.        // 內部根據當前執行是建立，可能是input元素，也可能是flash.
  17.        pick: '#filePicker',  
  18.        // 只允許選擇圖片檔案。
  19.        accept: {  
  20.            title: 'Images',  
  21.            extensions: 'gif,jpg,jpeg,bmp,png',  
  22.            mimeTypes: 'image/*'
  23.        },  
  24.        method:'POST',  
  25.    });  
  26.    // 當有檔案新增進來的時候
  27.    uploader.on( 'fileQueued', function( file ) {  // webuploader事件.當選擇檔案後，檔案被載入到檔案佇列中，觸發該事件。等效於 uploader.onFileueued = function(file){...} ，類似js的事件定義。
  28.        var $li = $(  
  29.                '<div id="' + file.id + '" class="file-item thumbnail">' +  
  30.                    '<img>' +  
  31.                    '<div class="info">' + file.name + '</div>' +  
  32.                '</div>'
  33.                ),  
  34.            $img = $li.find('img');  
  35.        // $list為容器jQuery例項
  36.        $list.append( $li );  
  37.        // 建立縮圖
  38.        // 如果為非圖片檔案，可以不用呼叫此方法。
  39.        // thumbnailWidth x thumbnailHeight 為 100 x 100
  40.        uploader.makeThumb( file, function( error, src ) {   //webuploader方法
  41.            if ( error ) {  
  42.                $img.replaceWith('<span>不能預覽</span>');  
  43.                return;  
  44.            }  
  45.            $img.attr( 'src', src );  
  46.        }, thumbnailWidth, thumbnailHeight );  
  47.    });  
  48.    // 檔案上傳過程中建立進度條實時顯示。
  49.    uploader.on( 'uploadProgress', function( file, percentage ) {  
  50.        var $li = $( '#'+file.id ),  
  51.            $percent = $li.find('.progress span');  
  52.        // 避免重複建立
  53.        if ( !$percent.length ) {  
  54.            $percent = $('<p class="progress"><span></span></p>')  
  55.                    .appendTo( $li )  
  56.                    .find('span');  
  57.        }  
  58.        $percent.css( 'width', percentage * 100 + '%' );  
  59.    });  
  60.    // 檔案上傳成功，給item新增成功class, 用樣式標記上傳成功。
  61.    uploader.on( 'uploadSuccess', function( file ) {  
  62.        $( '#'+file.id ).addClass('upload-state-done');  
  63.    });  
  64.    // 檔案上傳失敗，顯示上傳出錯。
  65.    uploader.on( 'uploadError', function( file ) {  
  66.        var $li = $( '#'+file.id ),  
  67.            $error = $li.find('div.error');  
  68.        // 避免重複建立
  69.        if ( !$error.length ) {  
  70.            $error = $('<div class="error"></div>').appendTo( $li );  
  71.        }  
  72.        $error.text('上傳失敗');  
  73.    });  
  74.    // 完成上傳完了，成功或者失敗，先刪除進度條。
  75.    uploader.on( 'uploadComplete', function( file ) {  
  76.        $( '#'+file.id ).find('.progress').remove();  
  77.    });  
  78.       $btn.on( 'click', function() {  
  79.         console.log("上傳...");  
  80.         uploader.upload();  
  81.         console.log("上傳成功");  
  82.       });  
  83.   });  
  84.  </script></span> 

相關推薦

Webuploader教程（一）------簡單實用上傳功能

webuplader是百度的一個前端開源上傳外掛，支援加密、分片上傳。還是闊以的。 不過文件寫的實在是不敢恭維，挫到爆，gettting start介紹快速開始，寫的都是缺少東西的，直接複製下來是不可以執行的。 總結出一個經驗，測試html最好還是使用jsp，不然修改了頁面

Solr叢集搭建詳細教程（一） Linux伺服器上安裝JDK小白教程

注：歡迎大家轉載，非商業用途請在醒目位置註明本文連結和作者名dijia478，商業用途請聯絡本人[email protected]。 一、Solr叢集的系統架構 SolrCloud(solr 雲)是Solr提供的分散式搜尋方案，當你需要大規模，容錯，分散式索引和檢索能力時使用 SolrCloud

ioc初步理解（一） 簡單實用aotufac搭建mvc三層+ioc（codeFirst）

1】首先搭好框架 　1.1】搭建ui層 　　1.2】建立其他內庫檔案 整個專案基本部分搭建完畢之後如下 2】使用nuget引用檔案 先在每一個專案中引入ef 然後再UI層引入以下兩個檔案autofac和Autofac.Mvc5     3】因為本d

ioc初步理解（一） 簡單實用aotufac搭建mvc三層+ioc（codeFirst）

1】首先搭好框架 　1.1】搭建ui層 　　1.2】建立其他內庫檔案 整個專案基本部分搭建完畢之後如下 2】使用nuget引用檔案 先在每一個專案中引入ef 然後再UI層引入以下兩個檔案autofac和Autofac.Mvc5 3】因為本demo實用codefir

py2exe使用教程（一）——簡單的示例

簡介 py2exe 是 Python Distutils 的一個外部擴充套件，它可以把Python指令碼轉為可執行的Windows程式，無需安裝Python即可執行。 你可以在官網得到更多資源。 說明 py2exe 可以把Python 程式轉為包，能夠在其

php爬蟲教程（一） 簡單的頁面抓取

最近朋友抓取點資料，寫了幾個抓取資料的指令碼。 主要功能是，分別抓起x了麼，美x，x度外賣的餐廳和菜品資料 ，後期我把程式碼分享出來。 今天就先說說簡單的頁面抓取 －－－－－－－－－－－－－－－

複習之SpringBoot應用（一）——SpringBoot檔案上傳

檔案上傳可以說開發人員的基本技能 SpringBoot專案結構與ssm有很大區別，檔案上傳也有差異 頁面 <!DOCTYPE html> <html> <head> <title>檔案上傳示例</

史上最簡單的 MyBatis 教程（一）

1 簡介 MyBatis 是支援普通 SQL 查詢，儲存過程和高階對映的優秀持久層框架，其幾乎消除了所有的 JDBC 程式碼和引數的手工設定以及結果集的檢索。MyBatis 使用簡單的 XML 或註解用於配置和原始對映，將介面和 Java 的 POJOs（Pl

fullpage.js簡單教程（一）

style 準備工作 iba 耐心 兼容性 css3 動畫 lin per orm 最近準備做一個全屏滾動的網頁，在網上搜了一堆教程，結果大多都是一些很籠統的使用方法，對我這種耐心不超過3秒的笨蛋來說，很晦澀很籠統，所以打算邊研究邊自己寫個教程，有什麽不懂的，我再回來翻看筆

Nginx實用教程（一）：啟動、停止、重載配置

style 負載 繼續 local con doc lin 配置文件的修改 tex Nginx是一個功能強大的web服務器和負載均衡軟件，由俄羅斯人開發。Nginx包括一個master進程和數個worker進程，master進程用於讀取、解析配置文件和管理worker進程，

機器學習實戰教程（一）：線性回歸基礎篇（上）

學習 reg style spa 目標 pub auto 機器 輸入 一 什麽是回歸？ 　　回歸的目的是預測數值型的目標值，最直接的辦法是依據輸入，寫入一個目標值的計算公式。 　　假如你想預測小姐姐男友汽車的功率，可能會這麽計算： 　　　　　　　　　　　　　　Ho

Spring Boot 的簡單教程（一） Spring Boot 專案的建立

一. 簡單介紹一下Spring Boot 世界慣例，在學習一個框架之前，我們需要了解一下這個框架的來歷。 下面我們引用一下百度百科的解釋。 Spring Boot是由Pivotal團隊提供的全新框架，其設計目的是用來簡化新Spring應用的初始搭建以及開發過程

檔案上傳漏洞靶場:upload-labs安裝+第一關教程（一）

注：本文僅供學習使用，請勿用於非法操作，後果與作者無關！記錄一下自己的學習過程，大佬勿噴！！ 一、簡介 upload-labs是一個使用php語言編寫的，專門收集滲透測試過程中遇到的各種上傳漏洞的靶場。旨在幫助大家對上傳漏洞有一個全面的瞭解。目前一共19關，每一關都包含著不同上傳方式。

Jupyter notebook教程系列（一）在windows上安裝Jupyter notebook

Jupyter notebook 一、Jupyternotebook簡介 jupyternotebook擴充套件了基於控制檯的互動計算方法，提供了一個適合捕獲整個計算過程的基於web的應用程式:開發、記錄和執行程式碼，以及傳遞結果。Jupyternotebook由兩部分組

hibernate簡單入門教程（一）---------基本配置

應用級別所以很粗淺 首先介紹一下hibernate框架： 1.優秀的持久化（通俗講把記憶體上的短時間執行資訊儲存在持久化硬碟上）框架。 2.作用於持久層，因為沒什麼侵入性，所以同樣適用於其他層面上的儲存 3.高度整合jdbc，簡化了很多jdbc的操作。比如查詢，比如儲存 4.二級快取。快取一部分所查

史上最詳細的Vmware安裝教程（一）-建立Linux虛擬機器

本文將演示如何使用Vwmare workstation軟體建立Linux虛擬機器，通過學習，我們將可以按照自己下需求，來建立一個安裝Linux作業系統（Centos）的虛擬機器，虛擬機器的CPU、硬碟、網絡卡、記憶體等硬體都可以根據需要進行定製。 1. 準備Host機器（

關於海康威視sdk與海康威視web的史上最精細的教程 （一）

小夥伴們都在下方留言要開發包 web： https://download.csdn.net/download/qq_35583089/10537585    sdk:    https://download.csdn.net/download/qq_35583089/10

史上最詳細的Android Studio系列教程（一）--下載和安裝

背景 相信大家對Android Studio已經不陌生了，Android Studio是Google於2013 I/O大會針對Android開發推出的新的開發工具，目前很多開源專案都已經在採用，Google的更新速度也很快，明顯能感覺到這是Android開發的未來，那

Spring MVC新手教程（一）

erp -s sil troy .html 解釋 rand rtu wire 直接幹貨 model 考慮給用戶展示什麽。關註支撐業務的信息構成。構建成模型。 control 調用業務邏輯產生合適的數據以及傳遞數據給視圖用於呈獻； view怎樣對數據進行布局，以

學習 MeteoInfo二次開發教程（一）

mat 沒有 組件 資源管理 img 教程 layer 添加 bbs 來自氣象家園：http://bbs.06climate.com/forum.php?mod=viewthread&tid=6631 按照教程，沒有太大問題，有些是對c#操作不熟悉導致。 1.添加d