基于h5的圖片無刷新上傳(uploadifive) - weihanli－IT工程師數位筆記本

文章出處

基于h5的圖片無刷新上傳(uploadifive)

uploadifive簡介

了解uploadify之前，首先了解來一下什么是uploadify，uploadfy官網，uploadify和uploadifive是一家的，他們都是基于jquery的插件，都支持多文件異步上傳，支持顯示上傳進度，不同的是uploadify基于swfUpload這一開源無刷新上傳插件開發，基于flash，而uploadifive則是基于html5，不依賴于flash.

基于他們的不同點，我們可以根據自己的需求來進行選擇，如果只是需要PC端使用，比如說網站的后臺管理模塊，那么選擇uploadify就可以了；如果需要用戶來上傳則可以考慮使用uploadifive，uploadifive是基于h5開發的，也是支持PC的，而且支持拖拽上傳【目前是收費的（5$）】。
uploadifive DemoTime
1. 項目背景

1. 1. 如果熟悉uploadify的話，uploadifive使用起來也會上手很快，之所以選擇uploadifive就是因為做一個項目的時候，需要用戶在手機上進行上傳個人的頭像，之前做過基于uploadify的PC文件上傳所以很快想到uploadify的html5版本uploadifive，因為是出自同一家，所以上手應該會很快，趕項目，所以就選擇了uploadifive，如果之后再遇到會嘗試著用其他的。到時候會及時更新博客與大家分享。
    
    建議不清楚uploadify使用的朋友可以先看下這里了解下uploadify的使用
2. 實例講解
  
  Uploadifive官網文檔示例：http://www.uploadify.com/documentation/uploadifive/implementing-uploadifive/
  
  所用到的uploadifive的文件結構如下：（注：如果要修改圖片的路徑需要修改樣式表uploadifive.css文件中圖片路徑）

　　　　　　按官網示例的步驟來：

1. - 首先引用js和css
    
        <script type="text/javascript" src="uploadify/jquery.min.js"></script>
    
        <script type="text/javascript" src="uploadify/jquery.uploadifive.min.js"></script>
    
        <link rel="stylesheet" type="text/css" href="uploadify/uploadifive.css" />
  - uploadifive初始化
    
    首先需要在頁面中有一個元素以供uploadifive來初始化，其次是需要利用js在頁面加載的時候實現uploadifive的初始化。
    
    <script type="text/javascript">
    
            $(function() {
    
                $('#file_upload').uploadifive({
    
                    'auto' : true,//是否自動上傳
    
                    //顯示文件上傳進度的元素id
    
                    'queueID' : 'queue',
    
                    //服務器端處理文件上傳的文件訪問路徑
    
                    'uploadScript' : 'uploadifive.php',
    
                    //上傳完成之后的回調函數
    
                    'onUploadComplete' : function(file, data) {
    
                        console.log(data);
    
                        if(data){
    
                            alert('上傳成功~~')
    
                        }else{
    
                            alert('上傳失敗！！'+rspdesc);
    
                        }
    
                     }
    
                });
    
            });
    
        </script>
  - 服務器端上傳文件處理
    
    服務器端的上傳主要是文件的保存，以及其他的業務處理，及其最后返回給客戶端的值，客戶端的js回調需要根據服務器端返回的值做出判斷做不同的處理。這里不做贅述
  - 設置回調函數
    
    根據服務器端返回的值進行判斷，進行不同的處理

　　　　總結

　　　　　　Uploadifive的使用和uploadify的使用大差不差，基本差不多，很容易上手，建議不熟悉uploadify的朋友還是先熟悉一下uploadify。

　　3.Demo示例代碼

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>uploadify Test</title>
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <script type="text/javascript" src="uploadify/jquery.min.js"></script>
 7     <script type="text/javascript" src="uploadify/jquery.uploadifive.min.js"></script>
 8     <link rel="stylesheet" type="text/css" href="uploadify/uploadifive.css" />
 9 </head>
10 <body>
11     <h1>Uploadify Demo</h1>
12     <form>
13         <div id="queue"></div>
14         <input id="file_upload" name="file_upload" type="file" multiple="false">
15     </form>
16 
17     <script type="text/javascript">
18         $(function() {
19             $('#file_upload').uploadifive({
20                 'auto'             : true,
21                 'queueID'          : 'queue',
22                 'uploadScript'     : 'upload.php',
23                 'onUploadComplete' : function(file, data) { 
24                     console.log(data);
25                     if(data){
26                         alert('上傳成功~~')
27                     }else{
28                         alert('上傳失敗！！'+rspdesc);
29                     }
30                  }
31             });
32         });
33     </script>
34 </body>
35 </html>