完成文件入列隊（fileQueued） →
完成選擇文件（fileDialogComplete） → 開始上傳文件（uploadStart） → 上傳處理（uploadProgress） → 上傳成功（uploadSuccess） → 上傳完成（uploadComplete） →
列隊完成（queueComplete）

如上所示，單選文件順序執(zhí)行以上回調(diào)函數(shù)，需要注意的是選擇多個文件，fileQueued、queueComplete只會執(zhí)行一次，而fileDialogComplet...→ uploadComplete每個文件都執(zhí)行一次。

參考官方例子完成基本功能后，仿趕集采用iframe的方式

為了實現(xiàn)縮略圖預覽以及刪除和上傳圖片個數(shù)的限制

顯示縮略圖，生成刪除縮略圖的按鈕，

thumbImages為父頁面顯示縮略圖的div
src_s為生成的縮略圖地址
src_b為原圖地址
serverData是圖片上傳處理頁面返回的數(shù)據(jù) 成功則以 success|縮略圖地址|原圖地址這樣的格式返回

function uploadSuccess(file, serverData) {
  try {
    var result = serverData.split('|');
    if(result[0] != 'success') {
      var progress = new FileProgress(file, this.customSettings.progressTarget);
      progress.setError();
      progress.setStatus(serverData);
      progress.toggleCancel(false);
    } else {
      var progress = new FileProgress(file, this.customSettings.progressTarget);
      progress.setComplete();
      progress.setStatus("上傳完成");
      progress.toggleCancel(false);
      var img_url_s = result[1];
      var img_url_b = result[2];
      addImage(img_url_s,img_url_b);
    }
  } catch (ex) {
    this.debug(ex);
  }
}

function addImage(src_s,src_b) {
  var newDiv = parent.document.createElement("div");
  newDiv.style.margin = "5px";
  newDiv.style.height = "60px";
  newDiv.style.width = "80px";
  newDiv.style.border = "1px solid #7F9DB9";
  newDiv.style.cssFloat = "left";
  newDiv.style.styleFloat = "left";
  newDiv.style.position = "relative";
  var newA = parent.document.createElement("a");
  newA.className = "delete";
  newA.title = "刪除";
  newA.href = "javascript::";
  newA.onclick = function(){delDiv(newDiv);};
  var newInput_s = parent.document.createElement("input");
  newInput_s.type = "hidden";
  newInput_s.value = src_s;
  newInput_s.name = "image_s[]";
  newA.appendChild(newInput_s);
  var newInput_b = parent.document.createElement("input");
  newInput_b.type = "hidden";
  newInput_b.value = src_b;
  newInput_b.name = "image_b[]";
  newA.appendChild(newInput_b);
  var newImgDiv = parent.document.createElement("div");
  var newImg = parent.document.createElement("img");
  newImg.style.height = "60px";
  newImg.style.width = "80px";
  newImgDiv.appendChild(newImg);
  newDiv.appendChild(newImgDiv);
  newDiv.appendChild(newA);
  parent.document.getElementById("thumbImages").appendChild(newDiv);
  if (newImg.filters) {
    try {
      newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
    } catch (e) {
      // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
      newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
    }
  } else {
    newImg.style.opacity = 0;
  }
  newImg.onload = function () {
    fadeIn(newImg, 0);
  };
  newImg.src = src_s;
}
function fadeIn(element, opacity) {
  var reduceOpacityBy = 5;
  var rate = 30; // 15 fps
  if (opacity < 100) {
    opacity += reduceOpacityBy;
    if (opacity > 100) {
      opacity = 100;
    }
    if (element.filters) {
      try {
        element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
      } catch (e) {
        // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
        element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
      }
    } else {
      element.style.opacity = opacity / 100;
    }
  }
  if (opacity < 100) {
    setTimeout(function () {
      fadeIn(element, opacity);
    }, rate);
  }
}

關(guān)于剩余可上傳文件個數(shù)的處理

function queueComplete(numFilesUploaded) {
  this.setButtonDisabled(false);
  var stats = this.getStats();
  var status = document.getElementById("divStatus");
  status.innerHTML = "已上傳 " + stats.successful_uploads + " 個文件,還可以上傳"+ parseInt(this.settings['file_upload_limit']-stats.successful_uploads) +"個文件";
}
function delDiv(mydiv) {
  mydiv.parentNode.removeChild(mydiv);
  //swfu參見iframe頁面中的 swfu = new SWFUpload(settings);
  var stats = swfu.getStats();
  stats.successful_uploads--;
  swfu.setStats(stats);
  var status = document.getElementById("divStatus");
  status.innerHTML = "已上傳 " + stats.successful_uploads + " 個文件,還可以上傳"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"個文件";
}

可能是由于使用iframe的關(guān)系

delDiv函數(shù)里的swfu不能用this代替

整體效果如下圖：

當上傳完圖片后，再次修改信息時，需要取已經(jīng)上傳了多少個圖片，結(jié)合到swfupload里

通過php從后臺取到已上傳的圖片路徑，通過smarty給到一個js數(shù)組里

var img_arr = new Array();
{if isset($img_arr)}
{section name='img_arr' loop=$img_arr}
img_arr[{$smarty.section.img_arr.index}] = new Array('{$img_arr[img_arr].images_s}','{$img_arr[img_arr].images_b}');
{/section}
{/if}

查詢swfupload文檔得到如下資料

flashReady()

該事件函數(shù)是內(nèi)部事件，因此不能被重寫。當SWFupload實例化，加載的FLASH完成所有初始化操作時觸發(fā)此事件。

提醒：對應(yīng)設(shè)置中的自定義事件swfupload_loaded_handler
于是通過swfupload的settings里設(shè)置 swfupload_loaded_handler

swfupload_loaded_handler : loaded,
再在handlers.js定義loaded函數(shù)

function loaded() {
  if(img_arr.length != 0) {
    for( val in img_arr ) {
      addImageFromDb(img_arr[val][0],img_arr[val][1],this);
    }
  }
}

調(diào)用addImageFromDb函數(shù) 修改已上傳的圖片數(shù)量并且生成已上傳的圖片的縮略圖

//初始化已經(jīng)上傳過的圖片
function addImageFromDb(src_s,src_b,swfu) {
  var stats = swfu.getStats();
  stats.successful_uploads++;
  swfu.setStats(stats);
  var status = document.getElementById("divStatus");
  status.innerHTML = "已上傳<font color='green'>" + stats.successful_uploads + "</font>張,還可以上傳<font color='red'>"+ parseInt(swfu.settings['file_upload_limit']-stats.successful_uploads) +"</font>張";
  addImage(src_s,src_b);
}

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: