Quick learning of Ajax 6 Ajax Implementation of refreshing upload of portraits

Haha, continue. This course is not much to talk about. We often talk about refreshing new uploads.

The simple registration we made in the last lesson is really simple. I have not changed many features, but please remember

I will certainly gradually improve its functions, but I will not implement it if they have little contact with Ajax at the moment.

Now, let's start our new upload without refreshing the image. By the way, we will generate a thumbnail image. Haha.

Preparation: a beautiful avatar Image

Then, one hand. Haha.
First, remember to create an upload folder.

Latest project structure

Okay. First, let's transform the uploaded <input>

         <  Tr  > <  TD  > Avatar: </  TD  > <  TD > <  Form  ID  = "Imageform"  Method  = "Post"  Action  = "Upload. ashx"  Enctype  = "Multipart/form-Data"> <  Input  Type  = "File"  Name  = "File"/> <  Input  Type = "Submit"  Value  = "Upload"  Onclick  = "Return checkfile (imageform. file. Value);"/> </  Form  > </  TD  > <  TD  > </  TD  > </  Tr  > This Is What We changed. Because the submission method required for the upload is post, we can only temporarily set up a post. 

<FormID= "Imageform"Method= "Post"Action= "Upload. ashx"Enctype= "Multipart/form-Data"> pay attention to this sentence.

Enctype must be of this type. The submit page is the upload. ashx page, so you need to create a new interface to receive our data.

The above onclick = "getsex (this. Value);" is actually a non-empty verification.

FunctionCheckfile (value ){If(Value ='') {Alert ('Select a file! '); Imageform. file. Focus ();Return false;}}
 

Okay, let's implement the most basic version below, without refreshing new upload portraits.

 <  Tr  > <  TD  > Avatar: </  TD  > <  TD  > <  Form ID  = "Imageform"  Method  = "Post"  Action  = "Upload. ashx"  Enctype  = "Multipart/form-Data"  Target  = "Submitiform"> <  Input  Type  = "File"  Name  = "File"/> <  Input  Type = "Submit"  Value  = "Upload"  Onclick  = "Return checkfile (imageform. file. Value);"/> </  Form  > </  TD  > <  TD  > </  TD  > </  Tr  > <  Tr  > < TD  Colspan  = 3> <  IMG  Style  ="  Width  : 150px;  Height  : 150px ;"  SRC  = "###"  ID  = "Image"/> </  TD  > </  Tr  > 

Modify the actual front-end avatar.Code.

Pay attention to a special point. This is also a tips for refreshing new uploads.Target= "Submitiform"

This place must be submitted,

 
<IFRAMEName= "Submitiform"Style="Display: None; "> </IFRAME>
 

Of course, you have other better methods. Here I mainly want to call JS events in the background for better implementation and the events in the parent form. Submitting this hidden ifrom is also a special method.

How to display images in real time added to the foreground

If(Filename ='') {Alert ('No file upload');Return false;} Document. getelementbyid ('Image'). Src ='Upload /'+ Filename ;}
 

Now, we have finished the basic work. below is the code for upload. ashx.

 Public void Processrequest ( Httpcontext Context) {context. response. contenttype = "Text/html" ; Context. response. contenttype = "UTF-8" ; Httppostedfile File = context. Request. Files ["File" ]; String Error = Null ; If (File = Null | File. contentlength <= 0) {error = "Select the image to be uploaded" ;} Else { String Newfilename = Guid . Newguid (). tostring (); VaR Extension = Path . Getextension (file. filename). toupper (); newfilename + = extension; String Filepath = String . Empty; If (Saveastemp (newfilename, file, context) {context. response. Write ( "<SCRIPT> parent. uploadover ('" + Newfilename + "') </SCRIPT>" );

 
}}} Context. response. Write ("<SCRIPT> parent. uploadover ('"+ Newfilename +"') </SCRIPT>");
I think you will know why the above sentence is nested with if.
 

Saveastemp

This method is used to save images.

Public boolSaveastemp (StringFilename,HttppostedfileFile,HttpcontextContext ){HttpserverutilityServer = context. server;Try{StringFilepath = server. mappath ("~ /Upload /"+ Filename); file. saveas (filepath );Return true;}Catch{Filename =Null;Return false;}}
 

It's easy. Okay. Check the effect.

In fact, we still have a lot to do, such as the size of the uploaded image, the format of the uploaded image, and the progress bar of the uploaded file.

I think these results will be even better. In the next lesson, we will try to improve the above example.

 

No need to upload the Net version 1.0. Haha.