- HTML:
包含母模板的页面
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebProject._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="jumbotron">
<div>
<div style="width: 250px; height: 250px; overflow: hidden;">
<label for="uploadImg">
<input id="uploadImg" type="file" name="uploadImg" style="display: none" accept="image/png, image/gif, image/jpg, image/jpeg" />
<img id="image" style="width: 200px; height: 200px;border:solid 1px #000000" src="Images/img_123.jpg">
</label>
<span id="uploadFile" class="btn btn-success">上传</span>
</div>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
</div>
</div>
<script src="Scripts/jquery-form.js"></script> <%--下载地址http://plugins.jquery.com/form/--%>
<script>
var imgUrl="";
$(function () {
$("#uploadFile").click(function () {
var options = {
type: "POST",
url: 'UploadHandler.ashx',
success: showSuccess,
error:showError,
/*clearForm: true,*/ //成功提交后清除所有表单字段值
};
$('#ctl01').ajaxSubmit(options);//ctl01为Form的id
})
});
function showSuccess() {
var str = $("#uploadImg").val();
$("#image").attr("src", getUrl(str));
alert("上传成功!");
}
function showError() {
alert("上传失败!");
}
function getUrl(s) {
var strs = s.split('\\');
var str = strs[strs.length - 1];
return "/Upload/" + str;
}
</script>
</asp:Content>
普通页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="WebProject.Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="jumbotron">
<div>
<div style="width: 250px; height: 250px; overflow: hidden;">
<label for="uploadImg">
<input id="uploadImg" type="file" name="uploadImg" style="display: none" accept="image/png, image/gif, image/jpg, image/jpeg" />
<img id="image" style="width: 200px; height: 200px; border: solid 1px #000000" src="Images/img_123.jpg">
</label>
<span id="uploadFile" class="btn btn-success">上传</span>
</div>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
</div>
</div>
<script src ="Scripts/jquery-1.11.3.min.js"></script>
<%--下载地址http://plugins.jquery.com/form/--%>
<script>
var imgUrl = "";
$(function () {
$("#uploadFile").click(function () {
var options = {
type: "POST",
url: 'UploadHandler.ashx',
success: showSuccess,
error: showError,
/*clearForm: true,*/ //成功提交后清除所有表单字段值
};
$('#form1').ajaxSubmit(options);//form1为Form的id
})
});
function showSuccess() {
var str = $("#uploadImg").val();
$("#image").attr("src", getUrl(str));
alert("上传成功!");
}
function showError() {
alert("上传失败!");
}
function getUrl(s) {
var strs = s.split('\\');
var str = strs[strs.length - 1];
return "/Upload/" + str;
}
</script>
</form>
</body>
</html>
- 一般处理程序:
using System.IO;
using System.Web;
namespace WebProject
{
/// <summary>
/// UploadHandler 的摘要说明
/// </summary>
public class UploadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
var file = context.Request.Files["uploadImg"];
if(file != null)
{
var ext = Path.GetExtension(file.FileName);
if (!(ext == ".jpeg" || ext == ".jpg" || ext == ".png" || ext == ".gif"))
{
context.Response.Write("您上传的不是图片");
context.Response.End();
}
else
{
string path = "/Upload/" + file.FileName;
file.SaveAs(context.Request.MapPath(path));
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}