jQuery檔案上傳外掛程式jQuery Upload File 有上傳進度條

標籤：

jQuery檔案上傳外掛程式jQuery Upload File 有上傳進度條

2015年05月15日

 

jQuery檔案上傳外掛程式jQuery Upload File，外掛程式使用簡單，支援單檔案和多檔案上傳，支援檔案拖拽上傳，有進度條顯示。標準HTML form檔案上傳，也就是說，只要服務端支援接收multipart/form-data格式資料就能使用此上傳外掛程式。

本站web端檔案檔案提交即使用此外掛程式，效果如下：

 

瀏覽器支援

瀏覽器支援：IE 8.0,IE 9.0,IE 10.0,Firefox,Safari,Opera,Chrome
支援檔案拖拽上傳的瀏覽器：IE10+,Firefox,Safari,Opera,Chrome

 

使用方法

1.在頁面head節點添加css和js檔案引用

<link href="/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet"><script src="/jquery/1.9.1/jquery.min.js"></script><script src="/jQuery-Upload-File/jquery.uploadfile.min.js"></script>

由於此外掛程式依賴jQuery外掛程式，因此以上樣本也添加了就jQuery庫的引用。別外在jQuery Upload File的源碼中引用在jQuery Form外掛程式，在使用時應做相應檢查，確保jQuery Form外掛程式的可訪問性。

 

2.在頁面的body節點中添加一個div處理上傳檔案

 

<div id="fileuploader">Upload</div>

 

3.添加js啟動指令碼

 

$(document).ready(function(){    $("#fileuploader").uploadFile({        url:"檔案上傳url",fileName:"myfile"    });});

 

本站的初始化樣本

 

本站上傳文章封面圖時使用了jQuery Upload File外掛程式，用於前端資料提交。

$("#fileuploader").uploadFile({    url:"/file/upload",                 //檔案上傳url    fileName:"image",               //提交到伺服器的檔案名稱    maxFileCount: 1,                //上傳檔案個數（多個時修改此處    returnType: ‘json‘,              //服務返回資料    allowedTypes: ‘jpg,jpeg,png,gif‘,  //允許上傳的檔案式    showDone: false,                     //是否顯示"Done"(完成)按鈕    showDelete: true,                  //是否顯示"Delete"(刪除)按鈕    onLoad: function(obj)    {        //頁面載入時，onLoad回調。如果有需要在頁面初始化時顯示（比如：檔案修改時）的檔案需要在此方法中處理        obj.createProgress(‘/tmpImage.jpg‘);      //createProgress方法可以建立一個已上傳的檔案    },    deleteCallback: function(data,pd)    {        //檔案刪除時的回調方法。        //如：以下ajax方法為調用伺服器端刪除方法刪除伺服器端的檔案        $.ajax({            cache: false,            url: "file/upload",            type: "DELETE",            dataType: "json",            data: {file:data.url},            success: function(data)             {                if(data.code===0){                    pd.statusbar.hide();        //刪除成功後隱藏進度條等                    $(‘#image‘).val(‘‘);                 }else{                        console.log(data.message);  //列印伺服器返回的錯誤資訊                 }              }        });     },    onSuccess: function(files,data,xhr,pd)    {        //上傳成功後的回調方法。本例中是將返回的檔案名稱保到一個hidden類開的input中，以便後期資料處理        if(data&&data.code===0){            $(‘#image‘).val(data.url);        }    }});

 

根據以上介紹，及本站的使用樣本，已經可以這個高大上的、有進度的檔案上傳外掛程式了。更多設定及使用方法請自行參考其github原始碼：jQuery Upload File

jQuery檔案上傳外掛程式jQuery Upload File 有上傳進度條