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 type="text/css" href="https://www.jb51.net/style.css" mce_href="https://www.jb51.net/style.css" media="all" /> <mce:script type="text/JavaScript" src="https://www.jb51.net/Scripts/jQuery-1.4.1.min.js" mce_src="Scripts/jquery-1.4.1.min.js"></mce:script> <mce:script type="text/javascript" src="https://www.jb51.net/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 runat="server"> <div> Upload File </div> <!-- Upload Button--> <div >Upload File</div><span ></span> <!--List Files--> <ul ></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"); } } } }