Implementation of image clipboard (File Upload)

Many users have said that the image clipboard of Sina Blog is very useful and easy to upload. It is really good to study it. Select a file and click Insert to the edit box,
You can select multiple, WYSIWYG, and no pop-up window at a time, which is convenient and concise. See figure

2.

The idea is that when the editor is opened, N forms and cells are initialized in the background to store browsing and displaying images.

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 + '); "> insert an image </a> </td> \
<Td width = "2"> </td> \
<Td width = "20" align = "center"> <a href = "javascript: clearSelect ('+ _ sId + '); "> /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 "> image clipboard </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> \

Where
From + ID Form ID
FileKey form serial number
FilePath + key file local path
Pictures in the picShow + ID Form
File + ID file Upload Control

When you select to upload an image, the initUpload event is triggered. This event is used to display the local file to picShow + ID. Click post and use js to process it. The postFile file is first triggered,

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 ();
}
}
Check the image forms one by one. If there is an image in the form field, submit the form of the image file to a hidden frame, that is, iframe.
<Iframe name = "iframe_data" id = "iframe_data" style = "display: none"> </iframe>

If an upload error occurs, call parent. report_upload_error (msg, id). If the upload succeeds, call parent. report_upload_ OK (form_id, imageUrl)
In report_upload_ OK, find the form through form_id, replace the image with a prompt indicating that the upload is successful, and replace the local path in the editing box with the image path on the server after the upload is successful,
Then, call postFile (++ id), submit to the hidden frame, and report the hidden frame to the parent window. The parent window submits the next image to the hidden frame, submit all images
After that, the current document will be post.

Well, it's a perfect solution. Unfortunately, this solution is not perfect after IE6, because IE7 and later versions do not support displaying local images, so you cannot preview images after selecting files, I want to see how Sina solved this problem. I even changed the upload method. I searched the internet and tried to use the AlphaImageLoader filter to solve this problem, firefox can also display local images by replacing the path, but the path directory in ff is lost, which is difficult to handle. For security reasons, I still feel that these solutions are not mature enough.

Therefore, I used the following scheme to modify initUpload, picShow + Id to display the image loading, and submit the current image form to the iframe, iframe Report status. After successful, I directly replaced it with the server path, no file relay is required when publishing an article.
This bypasses browser security issues and is compatible with most browsers. When you click to delete an image, it is submitted to the server in the background for deletion, which sacrifices a little loading time, but it seems worthwhile.

Effect in firefox