ajaxfileupload.js实现文件上传

 1  <head runat="server">  
 2         <title></title>  
 3        <script src="Scripts/jquery-1.3.1.min.js" type="text/javascript"></script>  
 4         <script src="Scripts/ajaxfileupload.js" type="text/javascript"></script>  
 5         <script type="text/javascript">  
 6             function ajaxFileUpload() {  
 7                 $.ajaxFileUpload  
 8             (  
 9                 {  
10                     url: 'handler/UploadImageHandler.ashx?userid=1&name=abc',  
11                     secureuri: false,  
12                     fileElementId: 'fileToUpload',  
13                     dataType: 'html',  
14                     beforeSend: function() {  
15                         $("#loading").show();  
16                     },  
17                     complete: function() {  
18                         $("#loading").hide();  
19                     },  
20                     success: function(data, status) {  
21                         if (typeof (data.error) != 'undefined') {  
22                             if (data.error != '') {  
23                                 alert(data.error);  
24                             } else {  
25                                 alert(data.msg);  
26                             }  
27                         }  
28                     },  
29                     error: function(data, status, e) {  
30                         alert(e);  
31                     }  
32                 }  
33             )  
34                 return false;  
35             }  
36         </script>  
37       
38     </head>  
39     <body>  
40         <form id="form1" runat="server">  
41         <table cellpadding="0" cellspacing="0" class="tableForm">  
42             <thead>  
43                 <tr>  
44                     <th>  
45                         Ajax File Upload  
46                     </th>  
47                 </tr>  
48             </thead>  
49             <tbody>  
50                 <tr>  
51                     <td>  
52                         <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">  
53                     </td>  
54                 </tr>  
55                 <tr>  
56                     <td>  
57                         Please select a file and click Upload button  
58                     </td>  
59                 </tr>  
60             </tbody>  
61             <tfoot>  
62                 <tr>  
63                     <td>  
64                         <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">  
65                             Upload</button>  
66                     </td>  
67                 </tr>  
68             </tfoot>  
69         </table>  
70         </form>  
71     </body>

ashx处理页面

 1     public class UploadImageHandler : IHttpHandler {  
 2           
 3         public void ProcessRequest (HttpContext context) {  
 4             //获取前台的FILE  
 5             HttpPostedFile file = context.Request.Files["fileToUpload"];  
 6               
 7             string path = "UploadImgs\\";  
 8             //Bitmap map = new Bitmap(filePath);  
 9             string fileName = Path.GetFileName(file.FileName);  
10             string mapPath = context.Server.MapPath("~");  
11             string savePath = mapPath + "\\" + path + fileName;  
12             //map.Save(savePath);  
13             file.SaveAs(savePath);  
14             //上传成功后显示IMG文件  
15             StringBuilder sb = new StringBuilder();  
16             sb.Append("<img id=\"imgUpload\" src=\""+path.Replace("\\","/")+fileName+"\" />");  
17             context.Response.Write(sb.ToString());  
18             context.Response.End();  
19         }  
20           
21           
22        
23         public bool IsReusable {  
24             get {  
25                 return false;  
26             }  
27         }  
28       
29     }

posted on 2015-11-01 13:02 YZQSL 阅读(877) 评论(0) 编辑收藏举报