上傳文件swfUpload 插件：

基本的文件上傳涉及到的四個(gè)文件? （還有一個(gè)處理數(shù)據(jù)的php文件? 這里沒有涉及到）

html頁(yè)面：

upload_window.html

js文件：

swfupload.js

handlers.js

fileprogress.js

第一：從html頁(yè)面出發(fā)：

重要的是將頁(yè)面加載時(shí)間中的var setting={}這個(gè)大對(duì)象中的參數(shù)設(shè)置好? 以下都是這個(gè)對(duì)象里面的常用配置 非常重要

首先需要將swfupload.swf加載

在 var? setting={} 這個(gè)大對(duì)象里面加flash_url:值

如： flash_url: "<tpl>$siteurl_static</tpl>/assets/uc/js/swfupload.swf",

然后需要將上傳的路徑加入 如： upload_url: "http://load.zom.com/u.do?uploadkey=" + uploadkey + "&ck=" + ck + "&cc=" + cc,(java的上傳路徑)

相關(guān)的設(shè)置常用的有：

file_size_limit? (設(shè)置上傳的大小)? ? file_types（設(shè)置文件上傳的類型）file_types_description（設(shè)置文件上傳描述）

file_upload_limit （設(shè)置文件上傳的數(shù)量限制）file_queue_limit （設(shè)置文件隊(duì)列數(shù)量限制）

prevent_swf_caching : false? （在相關(guān)的swf文件增加隨機(jī)參數(shù)避免Flash被緩存）

debug:false

按鈕的相關(guān)配置：

button_width: "200",

button_height: "50",

button_text_left_padding: 16,

button_text_top_padding: 7,

button_cursor:? button_cursor 指定鼠標(biāo)懸停在Flash按鈕上時(shí)的光標(biāo)樣式,可用值為SWFUpload.CURSOR里定義的常量。如：button_cursor: SWFUpload.CURSOR.HAND,

button_action（設(shè)置只能上傳一個(gè)文檔的限制：--》button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE）

之后就是設(shè)置一些事件處理函數(shù)? 這些都是在? handlers.js 里面相應(yīng)的函數(shù)

file_dialog_start_handler: fileDialogStart,（設(shè)置文件對(duì)話開始函數(shù)）

file_queued_handler: fileQueued,（設(shè)置文件隊(duì)列函數(shù)）

file_dialog_complete_handler: fileDialogComplete,（設(shè)置文件對(duì)話完成處理函數(shù)）

file_queue_error_handler: fileQueueError,（設(shè)置隊(duì)列錯(cuò)誤處理函數(shù)）

upload_start_handler: uploadStart,（設(shè)置開始上傳函數(shù)）

upload_progress_handler: uploadProgress,（設(shè)置上傳進(jìn)度處理函數(shù)）

upload_error_handler: uploadError,（設(shè)置上傳錯(cuò)誤處理函數(shù)）

upload_complete_handler: uploadComplete,（設(shè)置上傳完成處理函數(shù)）

upload_success_handler: uploadSuccess（設(shè)置上傳成功處理函數(shù)）

以上的配置都是在頁(yè)面自動(dòng)加載函數(shù)的setting大對(duì)象里面需要配置的基本參數(shù)

除了以上這些還有下面相應(yīng)的非常關(guān)鍵的配置

別忘記：在setting大對(duì)象結(jié)束之后 在自動(dòng)加載函數(shù)結(jié)束之前還有swfu = new SWFUpload(settings);? 實(shí)例化一個(gè)對(duì)象

var setting還有比較重要的配置? 如下：

1.關(guān)于上傳進(jìn)度的配置是關(guān)鍵：

在var setting={}這個(gè)大對(duì)象里面設(shè)置一個(gè)元素：

custom_settings: {

? ? ? ? ? ? ? ? ? ? progressTarget: "fsUploadProgress"

?},

progressTarget的值（即fsUploadProgress）是文件上傳進(jìn)度的顯示 將html里面設(shè)置相應(yīng)的位置放id="fsUploadProgress"

如：<div class="progressbar progressbar-0" id="fsUploadProgress">

? ? ? ? ? ? <span class="prog-num">0</span>

? ? ? ? </div>

span標(biāo)簽里的0就是從0開始進(jìn)行上傳? 0就是初始的顯示進(jìn)度

2：關(guān)于上傳的按鈕設(shè)置?

在 var setting={} 這個(gè)大對(duì)象里面設(shè)置? button_placeholder_id : "spanButtonPlaceHolder"

需要將html相應(yīng)的上傳按鈕加上相應(yīng)的id="spanButtonPlaceHolder"

如：<div id="upload_doc" class="up-btn"><i >上傳文檔</i><span id="spanButtonPlaceHolder"></span></div>

成功上傳需要將相應(yīng)的數(shù)據(jù)進(jìn)行處理：

在html頁(yè)面中需要寫ajax進(jìn)行數(shù)據(jù)的處理~

如：

//成功后調(diào)用

function agree_upload(){

? ? ? ? ? ? var doc_id=$('.doc_title').attr('id');

? ? ? ? ? ? if(doc_id>0){

? ? ? ? ? ? ? ? uploadFinish(doc_id);

? ? ? ? ? ? ? ? parent.DOC88Window.close();

? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? alert('您還未選擇重新上傳的文檔');

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? function uploadFinish(new_p_id) {

? ? ? ? ? ? var old_p_id = "<tpl>$p_id</tpl>";

? ? ? ? ? ? $.ajax({

? ? ? ? ? ? ? ? url: "/ucr/doc.php?act=save_upload",

? ? ? ? ? ? ? ? type: "post",

? ? ? ? ? ? ? ? data: {

? ? ? ? ? ? ? ? ? ? old_p_id: old_p_id,

? ? ? ? ? ? ? ? ? ? new_p_id: new_p_id

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? dataType: "json",

? ? ? ? ? ? ? ? success: function (msg) {

? ? ? ? ? ? ? ? ? ? if (msg.result == 1) {

? ? ? ? ? ? ? ? ? ? ? ? alert("數(shù)據(jù)正確");

? ? ? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? ? ? alert("數(shù)據(jù)錯(cuò)誤");

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? }

第二：因?yàn)閔tml頁(yè)面中setting配置中有相應(yīng)的函數(shù)處理配置? 涉及到handler.js函數(shù)赃承，所以接下來(lái)到handler.js文件的處理配置

根據(jù)html頁(yè)面的配置 處理函數(shù)的順序進(jìn)行相應(yīng)的配置

首先是fileQueue函數(shù)? 文件排隊(duì)函數(shù)：

需要設(shè)置一個(gè)變量 關(guān)于flash動(dòng)畫的函數(shù)

var stats = swfu.getStats();

根據(jù)需要將文件上傳隊(duì)列數(shù)量進(jìn)行限制

if (stats.files_queued > 1) {

? ? ? ? ? ? alert("您的附件不能超過(guò)1個(gè)");

? ? ? ? ? ? ? ? ? ? return false;

? ? }

接下來(lái)是fileQueueError函數(shù)? 文件排隊(duì)錯(cuò)誤函數(shù)：

根據(jù)需要將相應(yīng)的設(shè)置放在這個(gè)函數(shù)里面

可以放在try catch函數(shù)里面? ? 設(shè)置的限制如下：

? ? ? switch (errorCode) {

? ? ? ? ? ? case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:

? ? ? ? ? ? ? ? alert('單個(gè)文件大小不要超過(guò)50MB');

? ? ? ? ? ? ? ? break;

? ? ? ? ? ? case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:

? ? ? ? ? ? ? ? alert('不能上傳空文件');

? ? ? ? ? ? ? ? this.debug("Error Code: Zero byte file, File name: " + file.name + ", File size: " + file.size + ", Message: " + message);

? ? ? ? ? ? ? ? break;

? ? ? ? ? ? case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:

? ? ? ? ? ? ? ? alert('文件類型錯(cuò)誤');

? ? ? ? ? ? ? ? break;

? ? ? ? ? ? default:

? ? ? ? ? ? ? ? if (file !== null) {

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? this.debug("Error Code: " + errorCode + ", File name: " + file.name + ", File size: " + file.size + ", Message: " + message);

? ? ? ? ? ? ? ? break;

? ? ? ? }

接下來(lái)是uploadStart函數(shù)? 文件上傳開始函數(shù)：

設(shè)置相應(yīng)的功能按鈕的變換? 比如上傳開始（走到這個(gè)函數(shù)時(shí) 可以將相應(yīng)的上傳按鈕改成上傳中 并且禁止點(diǎn)擊 就是禁用功能 加上一個(gè)取消上傳按鈕 ）

可以將上傳的文件的名稱和文件格式顯示出來(lái)?

如：

$("#upload_doc i").html("上傳中");

? ? $('#cancel_upload').html('取消');

$("#upload_doc").attr('disabled','disabled');

var name = file.name;

? ? ? ? ? ? ? ? $('.doc_title').html(name);

? ? ? ? var format = file.type;

? ? ? ? format = format.toLocaleUpperCase();

? ? ? ? format = format.replace('.', '');

? ? ? ? $('.doc_format').html(format);?

接下來(lái)是uploadProgress函數(shù)? 文件上傳進(jìn)度函數(shù)：如：

var percent = Math.ceil((bytesLoaded / bytesTotal) * 100);//上傳的進(jìn)度

? ? ? ? var progress = new FileProgress(file, this.customSettings.progressTarget);

? ? ? ? progress.setProgress(percent);

? ? ? ? progress.setStatus("正在上傳");

接下來(lái)是uploadSuccess函數(shù)? 文件上傳成功函數(shù)

然后是uploadError函數(shù)? 上傳失敗函數(shù)：

其他相關(guān)的函數(shù)可以根據(jù)需要進(jìn)行設(shè)置

第三：fileprogress.js文件? 關(guān)于文件上傳進(jìn)度? 關(guān)鍵的是：

FileProgress函數(shù)的設(shè)置：

如：

function FileProgress(file, targetID) {

? ? ? ? this.fileProgressID = file.id;

? ? ? ? this.fileProgressWrapper = document.getElementById(this.fileProgressID);

? ? ? ? if (!this.fileProgressWrapper) {

? ? ? ? ? ? ? ? ? this.fileProgressWrapper = document.createElement("li");

? ? ? ? ? ? ? ? ? this.fileProgressWrapper.id = this.fileProgressID;

? ? ? ? ? ? ? ? ? document.getElementById(targetID).appendChild(this.fileProgressWrapper);

? ? ? ? }

? ? ? this.setTimer(null);

}

FileProgress.prototype.setProgress = function (percentage) {}? 里面進(jìn)度樣式的處理

如：

if (percentage <= 5) {

? ? ? ? ? ? ? ? $(".progressbar").addClass('progressbar-5');

? ? } else if (percentage <= 10) {

? ? ? ? ? ? ? ? $(".progressbar").addClass('progressbar-10');

? ? }......

第四：swfupload.js文件? ? 幾乎不用修改 可以將不用的函數(shù)刪減

有很詳細(xì)的講解 鏈接：https://www.cnblogs.com/myboke/p/5579236.html

http://www.runoob.com/w3cnote/swfupload-guide.html