项目结构
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" media="all" />
-
<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
-
<script type="text/javascript" src="../Scripts/ajaxupload.3.5.js"></script>
-
<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 + '" alt="" /><br />' + file).addClass('success');
-
} else { -
$('<li></li>').appendTo('#files').text(file).addClass('error');
-
}
-
}
-
});
-
});
-
</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"); -
}
-
}
-
}
-
}
下载地址：http://pjw100.download.csdn.net/
找到文件 jquery ajax file upload(刚刚上传，文件可能还没刷出来)