jQuery Ajax File Upload(附源码)

最新推荐文章于 2014-12-18 14:03:42 发布

转载最新推荐文章于 2014-12-18 14:03:42 发布 · 2.2k 阅读

文章标签：

#upload #file #jquery #ajax #stylesheet #function

ASP.NET 同时被 2 个专栏收录

10 篇文章

订阅专栏

JQuery

4 篇文章

订阅专栏

本文介绍了一种利用jQuery和Ajax技术实现文件上传的方法。通过客户端JavaScript与服务器端ASP.NET的交互，实现了文件的选择、验证及上传过程的异步处理，并展示了完整的HTML页面结构与服务端处理逻辑。

项目结构

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"></mce:script> </head> <body> <form id="form1" runat="server"> <div id="upload"> Upload File </div>  <div id="Div1" >Upload File</div><span id="status" ></span>  <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"); } } } }