jquery圖片上傳插件HHuploadify

好幾天沒有寫文章了，最近在作公司的一個後臺圖片上傳，基於Huploadify重寫了一下這個插件，在它的基礎上作了一些定製，已經託管在github，能夠經過這裏獲悉。

簡介

有一個著名的圖片上傳插件uploadify，在這個插件基礎上，Huploadify被開發出來，是由國人開發的，使用起來也比較好用。可是，我 但願對本身的項目進行定製，但願實現像淘寶添加圖片那樣，點擊一個上傳按鈕，而後本身上傳，上傳的時候，有一個進度條，上傳完以後，預覽圖片。

同時，在Huploadify基礎上，還增長了單個圖片上傳，好比在上傳頭像的時候，不可能讓你上傳多張圖片。

所以，我在Huploadify的基礎上進行修改，獲得了HHuploadify。

HHuploadify的用法和Huploadify的用法是如出一轍的。不過增長了幾個點：

• 增長isSingle配置項，在初始化的時候，若是isSingle=true，那麼這個上傳只能上傳一張圖片。domo.html中有案例

• 增長了上傳圖片結束後，將圖片顯示到該上傳區域中預覽，返回格式必須是json，有一個url字段。upload.php中有案例

修改樣式：經過修改HHuploadify.css文件中的樣式來控制表現。

上傳後獲得的圖片預覽是經過將圖片做爲該區域的背景圖片實現的，所以，若是要調整該圖片，必須經過css來進行控制。

安裝

獲取代碼：從個人github上下載HHuploadify的源代碼。

首先，你的網頁中得引入jquery

<script src="jquery-2.2.0.min.js"></script>

其次，再網頁中引入插件文件

<script src="jquery.HHuploadify.js"></script>

再次，再網頁頭部引入HHuploadify的樣式文件

<link rel="stylesheet" href="HHuploadify.css">

若是你想對HHuploadify的樣式進行修改，能夠修改HHuploadify.css文件中的具體規則，改完以後，把上面的地址改成HHuploadify.css，從而使用新的樣式。固然，你也能夠把裏面的樣式所有拷貝出來，放到本身的樣式文件裏面去，這樣就能夠不用引用HHuploadify.css。
使用

HHuploadify會初始化一個按鈕，讓你進行上傳。所以，在你須要展現這個按鈕的地方作以下操做。假如你想調用的容器爲<div id="upload"></div>，只須要在網頁底部加入以下代碼：

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        uploader:'upload.php' // 必須的，必須指定用來處理上傳邏輯的後端處理URL
    });
</script>

這樣，就能夠初始化一個按鈕，點擊按鈕以後能夠多選多張圖片，每張圖片會各自提交到upload.php。這裏提示一下，uploadify自己就是一張一張圖片提交的，而不是全部圖片一塊兒提交。upload.php能夠是你本身的URL，在這個URL進行圖片處理和保存，而且返回一個包含url字段的json字符串，經過這個url字段讓上傳區域展現圖片。

單張片上傳

你可能如今想上傳一張頭像圖片，先把css改成你想要的結果。在上面的代碼中，只須要加入一個isSingle參數便可：

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        isSingle:true,
        uploader:'upload.php'
    });
</script>

這樣，這個區域只能進行一張圖片的上傳。

初始化參數

fileTypeExts:'.',//容許上傳的文件類型，格式'.jpg;.doc' uploader:'',//文件提交的地址
auto:true,//是否開啓自動上傳 method:'post',//發送請求的方式，get或post
multi:true,//是否容許選擇多個文件 isSingle:false,//
是不是單個文件上傳，若是是單個文件上傳，選擇文件後，上傳按鈕會消失，multi也會被強制設定爲false
formData:null,//發送給服務端的參數，格式：{key1:value1,key2:value2}
fileObjName:'file',//在後端接受文件的參數名稱，如PHP中的$_FILES['file']
fileSizeLimit:2048,//容許上傳的文件大小，單位KB
showUploadedFilename:false,//是否顯示上傳文件名
showUploadedPercent:false,//是否實時顯示上傳的百分比，如20%
showUploadedSize:false,//是否實時顯示已上傳的文件大小，如1M/2M
buttonText:'選擇文件',//上傳按鈕上的文字 removeTimeout: 1000,//上傳完成後進度條的消失時間，單位毫秒
itemTemplate:itemTemp,//上傳隊列顯示的模板 onUploadStart:null,//上傳開始時的動做
onUploadSuccess:null,//上傳成功的動做 onUploadComplete:null,//上傳完成的動做
onUploadError:null, //上傳失敗的動做 onInit:null,//初始化時的動做
onCancel:null,//刪除掉某個文件後的回調函數，可傳入參數file
onClearQueue:null,//清空上傳隊列後的回調函數，在調用cancel並傳入參數*時觸發
onDestroy:null,//在調用destroy方法時觸發 onSelect:null,//選擇文件後的回調函數，可傳入參數file
onQueueComplete:null//隊列中的全部文件上傳完成後觸發

以上是HHuploadify的全部默認初始化參數，除了isSingle之外，其餘全部的都是和Huploadify同樣的，只不過我修改了它的默認值。

具體文檔請閱讀Huploadify。

例子

上傳圖片後提交保存相冊

如今模擬用HHuploadify來作一個相冊。用戶先建立了一個相冊A，多選圖片，上傳到該相冊，圖片所有由數據庫保存URL，並有對應的ID，如今要求，有一個相冊和圖片的關係數據表album_photo_relation用來保存哪一張圖片屬於哪個相冊。那麼問題來了，如何在上傳圖片的時候實現這個過程呢？

很簡單，在初始化參數中增長formData參數，好比：

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        formData: {album_id: <?=$album_id?>},
        uploader:'upload.php'
    });
</script>

在upload.php中就能接收到該相冊的ID：$_POST['album_id']。這樣，在upload.php中就能夠在插入完photo得到photo_id後，再向alubm_photo_relation表中插入一條記錄。

如今問題又來了，加入要求不容許先建立相冊、進入相冊再上傳，如今要求相冊建立時先上傳圖片，上傳完以後，和相冊信息（如名稱、描述等）一同提交到create_album.php。

這就複雜了，由於不能經過formData，直接在upload.php中完成每一張圖片的操做。怎麼辦呢？個人解決辦法是，在圖片上傳完成後，將圖片的photo_id加載到當前的頁面裏面，提交建立相冊的時候，同時能夠知道該相冊有哪些圖片。

<script>
    $('#upload').HHuploadify({
        fileTypeExts:'*.jpg;*.png;*.gift',
        uploader: 'upload.php',
        onUploadSuccess: function(file,data) {
            var photo = JSON.parse(data);
            var photo_id = photo.id;
            var instanceNumber = $('.uploadify').length+1;
            var file_index = file.index;
            $('#fileupload_' + instanceNumber + '_' + file_index).append('<input type="hidden" name="photo_id[]" value="' + photo_id + '">');
        }
    });
</script>

上面的代碼主要利用到了onUploadSuccess事件，及當一張圖片上傳成功以後的回調。這樣，在刪除的時候，能夠刪除掉對應的input，在提交的時候，能夠提交對應的photo_id[]。

上傳完圖片後可對圖片進行拖動排序

在相冊的案例中，有一種狀況是，還能夠對圖片進行拖動，調整圖片組的順序。怎麼實現呢？首先你得有一個可以實現拖動的jquery插件，我推薦DragSort。

<script src="jquery.dragsort-5.2.0.min.js"></script>
<script>
$('#upload').HHuploadify({
    fileTypeExts:'*.jpg;*.png;*.gift',
    uploader:'upload.php',
    onQueueComplete:function() {
        var instanceNumber = $('.uploadify').length+1;
        var $instance = $('#file_upload_' + instanceNumber + '-queue');
        $instance.dragsort("destroy");
        $instance.dragsort({
                dragSelector: "div.uploadify-queue-item",
                dragBetween: true,
                dragEnd: function(){
                    $instance.find('.uploadify-queue-item').removeAttr('style');
                },
                placeHolderTemplate: '<div class="uploadify-queue-item"></div>'
            });
    }
});
</script>

上面的代碼經過一個onQueueComplate事件綁定，在全部文件上傳結束後，執行函數中的動做。函數中的動做可使該區域內的全部圖片區域綁定dragsort，實現拖動排序的功效。

擴展函數

爲了實現更簡潔的載入，我新增了HHuploadifyReady.js，裏面有兩個函數initHHuploadify函數和resetHHuploadify函數。

function initHHuploadify(selector,uploader,field,isSingle)

selector是要初始化的選擇器，uploader是上傳後端處理URL，field是回調的時候，往區域內插入的input的name值，注意，插入的input name=field[]，提交的是一個數組，後端應該注意一下。isSingle就不解釋了，表示是否單個圖片上傳，當爲true時，input name=field，不是數組。

爲了便於使用，通常再使用的時候，你能夠不設置第四個參數，而是使用下面這個函數：

function initHHuploadifyOne(selector,uploader,field)

這個函數是從上面的函數衍生出來的，不用傳第四個參數，便可讓HHuploadify初始化爲一個只能上傳一張圖片的區域。

function resetHHuploadify(selector,images,field)

當完成初始化以後，你會發現，有的時候你的頁面上須要放置幾張圖片進去，好比在編輯相冊的時候，你的相冊中自己已經存在了一些圖片了，因此你在編輯它的時候，必須讓相冊中的圖片都顯示出來，這個時候，須要用resetHHuploadify來實現。它有三個參數，selector和前面的同樣，都是指初始化時的對象選擇器，例如$(selector)在前面的案例中就是$('#upload')。images是一個對象數組，包含了要用於顯示的圖片信息，首先它是一個數組，其次它的每個元素又是對象，形式以下：

[{'id' => 4,'url' => '/images/afa.jpg'},{'id' => 56,'url' =>
'/images/aafdsfa.jpg'},{'id' => 12,'url' => '/images/12fa.jpg'}]

爲何要這樣呢？id是用來做爲input的value值的，url是用來展現圖片的，就是這樣。field則是input的name值，注意，因爲是多個input，因此它也是input name=field[]，是個數組，後端接收的時候要注意。

不過在resetHHuploadify的基礎上，也衍生出了resetHHuploadifyOne

function resetHHuploadifyOne(selector,image,field)

惟一的區別在於第二個參數，由images變爲image，不是一個數組，而是一個對象，形式以下：

{'id' => 56,'url' => '/images/aafdsfa.jpg'}

只有一張圖片的信息。

OK，對HHuploadify的推介就到這裏了，若是你有不懂的地方，歡迎到個人github去提交issue。