有有很多用戶說新浪博客的圖片剪切板很好用，上傳方便,研究了一下，確實不錯啊，選擇文件，單擊插入到編輯框中，
一次可以選擇多個，所見所得，沒有彈出窗，方便簡潔,見圖

2.



思路是這樣,打開編輯器的時候，后臺初始化N個表單和單格，用來存放瀏覽顯示圖片

var sFileUpload = '\
<form id="form' + _sId + '" title="" enctype="multipart/form-data" action="<%=Globals.ApplicationPath %>/System/Club_ForumUploadImage.aspx?clubID=<%= SpacesContext.Current.ClubID %>" method="post" target="iframe_data">\
<input name="filePath" type="hidden" id="filePath' + _sId + '" />\
<input name="fileKey" type="hidden" value="' + _sId + '" />\
<input name="fileAction" id="fileAction' + _sId + '"  value="" type="hidden"  />\
<table width="180px" border="0" cellspacing="0" cellpadding="0" class="img_box">\
    <tr>\
      <td style="border:1px solid #000">\
     <table width="100%"  border="0" cellspacing="0" cellpadding="0">\
          <tr style="background:#dee3e7">\
            <td width="*" height="20">&nbsp;<a href="javascript:addArticle(' + _sId + ');">插入圖片</a></td>\
            <td width="2"><img src="img/pic_box_sline.gif" width="2" height="12"></td>\
            <td width="20" align="center"><a href="javascript:clearSelect(' + _sId + ');"><img src="<%=Globals.GetClubSkinPath() %>/images/del_btn.gif" width="10" height="10" border="0"></a></td>\
          </tr>\
          <tr>\
            <td height="1" colspan="3" bgcolor="#787878"></td>\
          </tr>\
          <tr align="center" valign="middle" bgcolor="#ffffff">\
            <td height="120" colspan="3" id="picShow' + _sId + '" style="background:url(\'\');"><span style="color:#7f7f7f">圖片剪切板</span></td>\
          </tr>\
        </table>\
      </td>\
    </tr>\
    <tr>\
      <td height="1"></td>\
    </tr>\
    <tr>\
      <td><input name="forumID" type="hidden" value="<%=SpacesContext.Current.ForumID %>" /><input name="fileContent" type="file" id="file' + _sId + '" type="file"    style="width:auto!important;width:100%;border:1px solid #000; font-size:12px;" onchange="javascript:initUpload(this,' + _sId + ');" /> </td>\
    </tr>\
</table>\
</form>\

其中
from+ID　    表單ID
fileKey      表單序列號
filePath+key 文件的本地路徑
picShow+ID   表單中的圖片
file+ID　　　文件上傳控件

當用戶選擇上傳圖片后，　觸發(fā)initUpload事件，該事件用來把本地文件顯示到picShow+ID中，單擊發(fā)布文章后用js處理，先postFile文件，

function postFile(_sId){
 var sId = 'form' + _sId;
 if (exist(sId)) {

  if ($(sId).title.length > 0 && seekUse(_sId)) {
   $(sId).submit();
  } else {
   clearSelect(_sId);
   postFile( ++_sId );
  }
 }else{
  et.save();
 var oForm=$('<%=PostForm.ClientID %>');
 $('<%=btn_Post.ClientID %>').click();
 }
}
逐個檢查圖片表單，如果表單域有圖片先提交圖片文件的表單，這個表單提交到一個隱藏幀，也就是iframe
 <iframe name="iframe_data" id="iframe_data" style="display: none"></iframe>

如果上傳出錯調(diào)用parent.report_upload_error(msg,id);上傳成功調(diào)用parent.report_upload_ok(form_id, imageUrl)
report_upload_ok里通過form_id找到表單，替換圖片為上傳成功提示，替換編輯框的里的本地路徑為上傳成功后服務(wù)器上的圖片路徑,
然后調(diào)用postFile(++id);就像接力一樣，提交到隱藏幀，隱藏幀報告給父窗口上傳成功，父窗口在提交下一個圖片到隱藏幀，所有圖片提交
完以后，在post當前文檔．

　嗯，挺完美的解決方案，可惜的是IE6以后這個方案不在完美，因為IE7以上版本不在支持顯示本地圖片，所以選擇文件后無法預覽圖片了，想看看新浪是怎么解決這個問題的，竟然連上傳方式都換了，網(wǎng)上搜索了一下似呼可以使用AlphaImageLoader濾鏡解決這個問題,firefox似呼也可以通過替換路徑來顯示本地圖片,不過ff下路徑目錄丟失，處理比較麻煩,出于安全考慮，還是覺得這些方案不夠成熟.

因此，我用了以下方案，　修改initUpload　，picShow +Id　顯示圖片載入中，并提交當前圖片表單到iframe,iframe報告狀態(tài)，成功后直接替換為服務(wù)器端路徑，發(fā)布文章時無需在文件接力
這樣就繞過了瀏覽器安全問題,并兼容大多數(shù)瀏覽器,當點擊刪除圖片時在后臺提交到server端刪除,犧牲了一點載入時間，不過看來是值得的

    firefox下效果