Use iframe and js in C # To Implement Asynchronous Image Upload

Use iframe and js in C # To Implement Asynchronous Image Upload

Place the page for uploading images in iframe, use iframe to jump to another page, and submit the images to the server on this page without refreshing the homepage, after the submission is successful, use a script (callback function) to display the uploaded image on the home page.

Image selection page Add. aspx

<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Add. aspx. cs" Inherits = "_ Add" %>    <Script type = "text/javascript"> // asynchronous upload function doUpload () {var theFrame = document. getElementById ("uploadframe"); if (theFrame) {theFrame = theFrame. contentWindow; theFrame. selectAndUpload () ;}} function callback (str) {var theImg = document. getElementById ("imgResult"); document. getElementById ("picUrl "). value = str; str = ".. /images/"+ str; theImg. setAttribute ("src", str) ;}</script>    

Image Upload processing page

Foreground PicUpload. aspx

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "PicUpload. aspx. cs" Inherits = "Web. Print. PicUpload" %>    No title page<Script type = "text/javascript"> function selectAndUpload () {var theFileUpload = document. getElementById ("<% = pic_upload.ClientID %>"); theFileUpload. onchange = function () {var fileExt = theFileUpload. value. substr (theFileUpload. value. lastIndexOf (". "); // determine the file size if (theFileUpload. files [0]. size> 8192000) {top. alert ("the file size exceeds 8 MB! Please select again! ");} Else {// verify if it is an image if (! FileExt. match (/\. jpg | \. png | \. bmp | \. gif/I) {top. alert ("only jpg, gif, bmp, and png images can be uploaded! ");} Else {var myForm = document. getElementById ("<% = form1.ClientID %>"); myForm. submit () ;}} theFileUpload. click ();} // callback function callback (filePath) {parent. callback (filePath); // top is also available. callback, But, if Add. aspx is redirected to other pages through iframe (for example, in index. aspx uses <iframe src = "Add. aspx "> </iframe> jump to Add. aspx), // top. callback cannot call back to Add. aspx, while parent. callback can be called back to Add. aspx} </script>    

Processing of Background Image Upload events and push callback Functions

PicUpload. aspx. cs:

Using System; using System. collections; using System. configuration; using System. data; using System. linq; using System. web; using System. web. security; using System. web. UI; using System. web. UI. htmlControls; using System. web. UI. webControls; using System. web. UI. webControls. webParts; using System. xml. linq; using System. IO; using System. security. cryptography; namespace Web. print {public partial class PicUpload: System. web. UI. page {protected void Page_Load (object sender, EventArgs e) {if (IsPostBack & pic_upload.HasFile) {// get the file extension and convert it to lowercase string fileExtension = Path. getExtension (pic_upload.FileName ). toLower (); string filepath = "/images/"; if (Directory. exists (Server. mapPath (filepath) = false) // create a file folder {Directory. createDirectory (Server. mapPath (filepath);} string hash = CreatePasswordHash (pic_upload.FileName, 4); string virpath = filepath + hash + fileExtension; // This is the virtual path stored on the Server string mappath = Server. mapPath (virpath); // converts it to the physical path pic_upload.SaveAs (mappath) on the server; ScriptManager. registerStartupScript (this, this. getType (), "callback", "callback ('" + hash + fileExtension + "');", true );}}////// Create a random salt value of the specified length ///Public string CreateSalt (int saltLenght) {// generate an encrypted random number RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider (); byte [] buff = new byte [saltLenght]; rng. getBytes (buff); // returns the return Convert string of a Base64 random number. toBase64String (buff );}////// Return the encrypted string ///Public string CreatePasswordHash (string pwd, int saltLenght) {string strSalt = CreateSalt (saltLenght); // connect the password to Salt string saltAndPwd = String. concat (pwd, strSalt); // hash the password string hashenPwd = FormsAuthentication. hashPasswordForStoringInConfigFile (saltAndPwd, "sha1"); // convert it to lowercase characters and extract the first 16 strings hashenPwd = hashenPwd. toLower (). substring (0, 16); // return the hash value return hashenPwd ;}}}