SWFUpload is highly customizable and is very suitable for upload operations. However, sometimes we can only use the simple falsh of f to complete this function.
Next we will use a relatively simple plug-in, the effect is as follows
To learn a plug-in, we can familiarize ourselves with the Demo provided by it.
1. In demo,, avatar.swf is the Flash file uploaded, default.jpgis the image displayed by the upload, and demo.html is the demo. You can directly copy the code in it, upfile. aspx is the background file for uploading. In fact, we can use a general processing program instead of aspx. There is no need to write aspx. The actual function of xml is unknown and does not need to be modified.
2. Demo.html contains two layers. altContent stores flash. It is recommended that you do not modify the content. We only need to modify the reference path and default image in flash. avatar_priview is used to display the uploaded image, can be deleted. In JS, the uploadevent is successfully uploaded and executed. status indicates the response message value. If 1 is returned, the message is successfully executed.
| The code is as follows: | Copy code |
Var time = new Date (). getTime (); |
|
This code is only used to display the images uploaded successfully and can be deleted. Demo.html
Demo.html
| The code is as follows: | Copy code |
| <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml: lang = "en"> <Head> <Title> demonstration of the flash Upload Avatar component </title> <Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/> <Meta name = "Keywords" content = "flash Avatar Upload component, imitation Sina Weibo avatar Upload component, avatar image clipping"/> <Meta name = "Description" content = "upload an avatar in flash, user experience, Avatar cropping, and preview components"/> <Style type = "text/css" media = "screen"> Html, body {height: 100%; background-color: # ffffff ;} # FlashContent {width: 100%; height: 100% ;} </Style> <Script type = "text/javascript"> Function uploadevent (status ){ // Alert (status ); Status + = ''; Switch (status ){ Case '1 ': Var time = new Date (). getTime (); // This is used to display the uploaded image, but the image address is fixed, not the path received the day after tomorrow Document. getElementById ('Avatar _ priview'). innerHTML = "avatar 1: <br/> Avatar 2: <br/> Avatar 3: "; Break; Break; Case '-1 ': Window. location. reload (); Break; Default: Window. location. reload (); } } </Script> </Head> <Body> <Div id = "altContent"> <OBJECT classid = "clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" Codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH = "650" HEIGHT = "450" id = "myMovieName"> <! --- Modify the flash path here --> <Param name = movie VALUE = "/Flash/avatar.swf"> <Param name = quality VALUE = high> <Param name = bgcolor VALUE = # FFFFFF> <! ----./Default.jpg modify the default image path, =./upfile. aspx modify the path of the background execution page -----------> <Param name = "flashvars" value = "imgUrl =/UploadImg/default.jpg & uploadUrl = upfile. ashx & uploadSrc = false & pSize = 162 | 162 | 48 | 48 | 20 | 20 "/> <! ----./Default.jpg modify the default image path, =./upfile. aspx modify the path of the background execution page -----------> <! --- Modify the flash path here --> <EMBED src = "/Flash/avatar.swf" quality = high bgcolor = # ffffff width = "650" HEIGHT = "450" wmode = "transparent" flashVars = "imgUrl =/UploadImg/ default.jpg & uploadUrl = upfile. ashx & uploadSrc = false & pSize = 162 | 162 | 48 | 48 | 20 | 20" NAME = "myMovieName" ALIGN = "" TYPE = "application/x-shockwave-flash" allowScriptAccess = "always" PLUGINSPAGE = "http://www.macromedia.com/go/getflashplayer"> </EMBED> </OBJECT> </Div> <! -- This div is used to demonstrate the uploaded image. You can delete it. ---> <Div id = "avatar_priview"> </div> </Body> </Html> |
|
We probably know what operations are done at the front end. Let's take a look at the background.
The background is very simple. Get the source image and the three images after the modification:
| The code is as follows: | Copy code |
| String pic = Request. Form ["pic"]; String pic1 = Request. Form ["pic1"]; String pic2 = Request. Form ["pic2"]; String pic3 = Request. Form ["pic3"]; |
|
And save the image through File. Of course, if you only need an image, you can delete unnecessary code or modify the address for saving the image. With the image address, we can directly store the image address in the database.
Note that the response message is returned.
Response. write ("{" status ": 1}"); cannot be modified. If it is changed to another value, such as the image path, the background can be uploaded successfully, however, the front-end cannot respond to the upload success. The upload success dialog box cannot be displayed. If we need to return the path processed by the background to the foreground, we can use Session or static variables to save the value in the background.
Upfile. ashx
| The code is as follows: | Copy code |
| Public void ProcessRequest (HttpContext context) { String pic = context. Request. Form ["pic"]; String pic1 = context. Request. Form ["pic1"]; String pic2 = context. Request. Form ["pic2"]; String pic3 = context. Request. Form ["pic3"]; // Source image If (pic. Length = 0) { } Else { Byte [] bytes = Convert. FromBase64String (pic); // encodes binary into an array of eight unsigned integers. String url = "./src.png "; FileStream fs = new FileStream (context. Server. MapPath (url), System. IO. FileMode. Create ); Fs. Write (bytes, 0, bytes. Length ); Fs. Close (); } Byte [] bytes1 = Convert. FromBase64String (pic1); // encodes binary into an array of 8-bit unsigned integers. Byte [] bytes2 = Convert. FromBase64String (pic2); // encodes binary into an array of 8-bit unsigned integers. Byte [] bytes3 = Convert. FromBase64String (pic3); // encodes binary into an array of 8-bit unsigned integers. // Figure 1, String url1 = ". /1.png"; // modify the address of the saved Image. If no is set to 1.png, the address is overwritten for the second time. To avoid duplicate names, you can use guid: string fileLoadName = Guid. newGuid (). toString () + ". png "; FileStream fs1 = new FileStream (context. Server. MapPath (url1), System. IO. FileMode. Create ); Fs1.Write (bytes1, 0, bytes1.Length ); Fs1.Close (); // Figure 2 String url2 = "./2.png "; FileStream fs2 = new FileStream (context. Server. MapPath (url2), System. IO. FileMode. Create ); Fs2.Write (bytes2, 0, bytes2.Length ); Fs2.Close (); // Figure 3 String url3 = "./3.png "; FileStream fs3 = new FileStream (context. Server. MapPath (url3), System. IO. FileMode. Create ); Fs3.Write (bytes3, 0, bytes3.Length ); Fs3.Close (); // Here the response is 1, and the foreground receives the json Array {status: 1}. If the returned Image address is changed to context. response. write ("{" status ":" + url1 + "}"); the uploadevent method cannot be executed on the front-end page, and the format can only be {"status": 1 }. // If you want to return the image path, you can use the static class or session method. Context. Response. Write ("{" status ": 1 }"); } |
|
Now our screenshot Upload function is complete.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
