jQuery Ajax File Upload实例源码

本文实例为大家分享了jQuery Ajax File Upload实例源码，供大家参考，具体内容如下
项目结构
Default.aspx
Upload.aspx
Scripts/…
style.css
效果图

客户端html代码

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="UploadFile.aspx.vb" Inherits="Web.UploadFile" %><！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="Stylesheet" type="text/css" href="style.css" mce_href="style.css" media="all" /> <mce:script type="text/JavaScript" src="../Scripts/jQuery-1.4.1.min.js" mce_src="Scripts/jquery-1.4.1.min.js"></mce:script> <mce:script type="text/javascript" src="../Scripts/ajaxupload.3.5.js" mce_src="Scripts/ajaxupload.3.5.js"></mce:script> <mce:script type="text/javascript"><！-- $（function （） { var btnUpload = $（"#upload"）; var status = $（"#status"）; new AjaxUpload（btnUpload, { action: "Upload.aspx", //Name of the file input box name: "uploadfile", onSubmit: function （file, ext） { if （！（ext && /^（jpg|png|jpeg|gif）$/.test（ext））） { // check for valid file extension status.text（"Only JPG, PNG or GIF files are allowed"）; return false; } status.text（"Uploading..."）; }, onComplete: function （file, response） { //On completion clear the status status.text（""）; //Add uploaded file to list if （response === "success"） { $（"<li></li>"）.appendTo（"#files"）.html（"<img src="./uploads/" + file + "" mce_src="uploads/" + file + "" alt="" /><br />" + file）.addClass（"success"）; } else { $（"<li></li>"）.appendTo（"#files"）.text（file）.addClass（"error"）; } } }）; }）; // --></mce:script> </head> <body> <form id="form1" runat="server"> <div id="upload"> Upload File </div><！-- Upload Button--> <div id="Div1" >Upload File</div><span id="status" ></span> <！--List Files--> <ul id="files" ></ul> </form> </body> </html>

服务端处理代码Upload.aspx

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;namespace JqueryAjaxUploadTest { public partial class Upload : System.Web.UI.Page { protected void Page_Load（object sender, EventArgs e） { try { HttpPostedFile hpfFile = Request.Files["uploadfile"]; hpfFile.SaveAs（Server.MapPath（"~/uploads/"） + hpfFile.FileName）; Response.Write（"success"）; } catch （Exception） {Response.Write（"fail"）; } } } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。