ASP. NET uses jquery to automatically upload images

I remember that last year, I encountered a problem when I was uploading images. At that time, I also asked a question in the blog Garden (http://q.cnblogs.com/q/28119 ), finally, I chose uploadify to solve the problem at that time. When uploading images a few days ago, I wanted to select images and then upload them immediately. Naturally, I thought of using jquery, But I encountered the problem last year. In this case, I still need to submit a form. One of the ASP. Net work notes written by a friend in the garden the day before yesterday: Picture upload preview and no refreshing upload. Today I also wrote an example specially. You are welcome to criticize and correct me.

Demo Structure

Next let's take a look atCode:

HTML code:

 
1:<Form ID= "Form1" Runat= "Server">
 

 
2:<Div ID= "Upload">
 

3:<Input Type= "File" ID= "Uploadimage" Name= "Uploadimage" />
 

 
4:</Div>
 

 
5:<Div ID= "Preview">
 

6:<IMG ID= "Previewimage" SRC= "Images/nopic.jpg" ALT= "No image" />
 

 
7:</Div>
 

 
8:</Form>
 

CSS code:

 
1:# Upload
 

 
2:{
 

 
3:Height: 25px;
 

 
4:}
 

5:# Upload Input
 

 
6:{
 

 
7:Float: left;
 

 
8:Margin: 0 20px 0 0;
 

 
9:}
 

 
10:# Upload img
 

 
11:{
 

 
12:Width: 25px;
 

 
13:Height: 25px;
 

 
14:Float: left;
 

 
15:}
 

16:# Preview
 

 
17:{
 

 
18:Width: 300px;
 

 
19:Margin: 10px 0 0 0;
 

 
20:}
 

 
21:# Preview img
 

 
22:{
 

 
23:Width: 300px;
 

 
24:Height: 260px;
 

 
25:}
 

JS Code:

First, reference the following JS file:

 
1:<SCRIPT src =JS/jquery-1.7.2.min.js"Type ="Text/JavaScript"> </SCRIPT>
 

2:<SCRIPT src ="JS/jquery. Form. js"Type ="Text/JavaScript"> </SCRIPT>
 

 

 
1:$ (Function(){
 

2:VaRWait = $ (");
 

 
3:$ ("# Uploadimage"). Change (Function(){
 

 
4:$ ("# Form1"). Ajaxsubmit ({
 

 
5:URL:'Uploadimage. ashx',
 

 
6:Beforesubmit:Function(){
 

 
7:$ ("# Upload"). Append (wait );
 

8:$ ("# Upload IMG").Css ("Display","Inline");
 

 
9:},
 

 
10:Success:Function(Data ){
 

 
11:$ ("# Upload IMG"). Fadeout (2000 );
 

 
12:If(Data! ="Upload Failed"){
 

 
13:$ ("# Previewimage"). ATTR ("Src","Uploadimages /"+ Data). Hide (). fadein (2000 );
 

14:}
 

 
15:Else{
 

 
16:Alert ("Upload Failed");
 

 
17:}
 

 
18:}
 

 
19:});
 

 
20:});
 

 
21:});
 

The uploadimage. ashx file code is as follows:

 
1:Public VoidProcessrequest (httpcontext context)
 

 
2:{
 

3:Context. response. contenttype ="Text/plain";
 

 
4:Httppostedfile file = context. Request. Files [0];
 

 
5:If(File! =Null)
 

 
6:{
 

 
7:Try
 

 
8:{
 

 
9:// Path of the folder where the image is saved
 

 
10:StringPath = context. server. mappath ("~ /Uploadimages /");
 

11:// A folder of images uploaded every day
 

 
12:StringFolder = datetime. Now. tostring ("Yyyymmdd");
 

 
13:// If the folder does not exist, create
 

 
14:If(! Directory. exists (path + folder ))
 

 
15:{
 

 
16:Directory. createdirectory (path + folder );
 

 
17:}
 

 
18:// Upload the image Extension
 

19:StringType = file. filename. substring (file. filename. lastindexof ('.'));
 

 
20:// Save the image file name
 

 
21:StringSavename = guid. newguid (). tostring () + type;
 

 
22:// Save the image
 

 
23:File. saveas (path + folder +"/"+ Savename );
 

 
24:Context. response. Write (Folder +"/"+ Savename );
 

 
25:}
 

26:Catch
 

 
27:{
 

 
28:Context. response. Write ("Upload Failed");
 

 
29:}
 

 
30:}
 

 
31:}
 

LastProgramShows the running effect:

Image not uploaded

After uploading

I tested the above Code in Google and ff. The following problems may occur in ie9:

Check the problem and start the developer tool of ie9 for debugging. After debugging, you can find that ie9 adds <PRE> and </PRE>

In this case, you need to modify the JS Code. For ie9, replace <PRE> </PRE>.

 
1:Success:Function(Data ){
 

 
2:$ ("# Upload IMG"). Fadeout (2000 );
 

 
3:If(Data! ="Upload Failed"){
 

 
4:If($. Browser. MSIE ){
 

 
5:Data = data. Replace ("<PRE>",""). Replace ("</PRE>","");
 

 
6:}
 

7:$ ("# Previewimage"). ATTR ("Src","Uploadimages /"+ Data). Hide (). fadein (2000 );
 

 
8:}
 

 
9:Else{
 

 
10:Alert ("Upload Failed");
 

 
11:}
 

 
12:}
 

The above code is only tested in ie9. For other versions, you can test the code by yourself.

Online Test address: http://www.tnmblogs.com/Demo/UploadImage.aspx