小奋斗 - 轻松学习从此开始!
IT小奋斗群 QQ群:62017228

ASPX jQuery Ajax File Upload(附源码)

项目结构

Default.aspx
Upload.aspx
Scripts/…
style.css

效果图

2010-10-21 11-24-27

 

客户端html代码

[xhtml] view plain copy
  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadFile.aspx.vb" Inherits="Web.UploadFile" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7.     <link rel="Stylesheet" type="text/css" href="style.css" mce_href="style.css" media="all" />  
  8.     <mce:script type="text/JavaScript" src="../Scripts/jQuery-1.4.1.min.js" mce_src="Scripts/jquery-1.4.1.min.js"></mce:script>  
  9.     <mce:script type="text/javascript" src="../Scripts/ajaxupload.3.5.js" mce_src="Scripts/ajaxupload.3.5.js"></mce:script>  
  10.     <mce:script type="text/javascript"><!--  
  11.         $(function () {  
  12.             var btnUpload = $('#upload');  
  13.             var status = $('#status');  
  14.             new AjaxUpload(btnUpload, {  
  15.                 action: 'Upload.aspx',  
  16.                 //Name of the file input box  
  17.                 name: 'uploadfile',  
  18.                 onSubmit: function (file, ext) {  
  19.                     if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {  
  20.                         // check for valid file extension  
  21.                         status.text('Only JPG, PNG or GIF files are allowed');  
  22.                         return false;  
  23.                     }  
  24.                     status.text('Uploading...');  
  25.                 },  
  26.                 onComplete: function (file, response) {  
  27.                     //On completion clear the status  
  28.                     status.text('');  
  29.                     //Add uploaded file to list  
  30.                     if (response === "success") {  
  31.                         $('<li></li>').appendTo('#files').html('<img src="./uploads/' + file + '" mce_src="uploads/' + file + '" alt="" /><br />' + file).addClass('success');  
  32.                     } else {  
  33.                         $('<li></li>').appendTo('#files').text(file).addClass('error');  
  34.                     }  
  35.                 }  
  36.             });  
  37.         });  
  38.   
  39.       
  40. // --></mce:script>  
  41. </head>  
  42. <body>  
  43.     <form id="form1" runat="server">  
  44.     <div id="upload">  
  45.         Upload File  
  46.     </div>  
  47.   
  48.     <!-- Upload Button-->  
  49.     <div id="Div1" >Upload File</div><span id="status" ></span>  
  50.     <!--List Files-->  
  51.     <ul id="files" ></ul>  
  52.   
  53.   
  54.     </form>  
  55. </body>  
  56. </html>  
 

 

服务端处理代码Upload.aspx

 

[c-sharp]  view plain  copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace JqueryAjaxUploadTest  
  9. {  
  10.     public partial class Upload : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.             try  
  15.             {  
  16.                 HttpPostedFile hpfFile = Request.Files["uploadfile"];  
  17.                 hpfFile.SaveAs(Server.MapPath("~/uploads/") + hpfFile.FileName);  
  18.                 Response.Write("success");  
  19.             }  
  20.             catch (Exception)  
  21.             {  
  22.   
  23.                 Response.Write("fail");  
  24.             }  
  25.         }  
  26.     }  
  27. }  
 

我来评几句
登录后评论

已发表评论数(0)