<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標題頁</title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#fileUp').change(function() {
$('#uploadLog').html('開始上傳中....');
$('#formFile').submit();
});
})
function uploadSuccess(msg) {
if (msg.split('|').length > 1) {
$('#imgShow').attr('src', msg.split('|')[1]);
$('#uploadLog').html(msg.split('|')[0]);
} else {
$('#uploadLog').html(msg);
}
}
</script>
</head>
<body>
<!--
大家注意到這個form的target的了么？這個target屬性的值frameFile,是form之后的iframe的name值,
這樣的寫法是讓當前的form表單在提交表單內容的時候轉交給iframe中進行頁面中表單處理，
並且不會產生當前頁面跳轉!
-->
<form id='formFile' name='formFile' method="post" action="IbeaconHandler.ashx" target='frameFile'
enctype="multipart/form-data">
<input type='file' id='fileUp' name='fileUp' />
<div id='uploadLog'>
</div>
<br />
<img width='200' src='' height='200' id='imgShow' alt='縮略圖' />
</form>
<!--
這個iframe拿到post過來的表單數據后會開始在自身內部訪問post過來的頁面地址,在內部中它會刷新頁面，
但是這已不重要了，因為當前的iframe已經被我display:none隱藏了！所以這樣給用戶看起來像是無刷新的
頁面文件上傳，其實只是做一個一個小小的技巧！
-->
<iframe id='frameFile' name='frameFile' style='display: none;'></iframe>
</body>
</html>
后台代碼：
<%@ WebHandler Language="C#" Class="IbeaconHandler" %>
using System;
using System.Web;
using System.IO;
public class IbeaconHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//string fname = context.Request.QueryString["op"].ToString();
//string str =fname+"({name:'judy',age:'23'})";
try {
//獲取當前Post過來的file集合對象,在這里我只獲取了<input type='file' name='fileUp'/>的文件控件
HttpPostedFile file = context.Request.Files["fileUp"];
if (file != null)
{
//當前文件上傳的目錄
string path = context.Server.MapPath("~/images/");
//當前待上傳的服務端路徑
string imageUrl = path +Path.GetFileName(file.FileName);
//當前文件后綴名
string ext = Path.GetExtension(file.FileName).ToLower();
//驗證文件類型是否正確
if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp"))
{
//這里window.parent.uploadSuccess()是我在前端頁面中寫好的javascript function,此方法主要用於輸出異常和上傳成功后的圖片地址
context.Response.Write("<script>window.parent.uploadSuccess('你上傳的文件格式不正確！上傳格式有(.gif、.jpg、.png、.bmp)');</script>");
context.Response.End();
}
//驗證文件的大小
if (file.ContentLength > 1048576)
{
//這里window.parent.uploadSuccess()是我在前端頁面中寫好的javascript function,此方法主要用於輸出異常和上傳成功后的圖片地址
context.Response.Write("<script>window.parent.uploadSuccess('你上傳的文件不能大於1048576KB!請重新上傳！');</script>");
context.Response.End();
}
//開始上傳
file.SaveAs(imageUrl);
//這里window.parent.uploadSuccess()是我在前端頁面中寫好的javascript function,此方法主要用於輸出異常和上傳成功后的圖片地址
//如果成功返回的數據是需要返回兩個字符串，我在這里使用了|分隔 例： 成功信息|/Test/hello.jpg
context.Response.Write("<script>window.parent.uploadSuccess('Upload Success!|/Test/" + file.FileName + "');</script>");
context.Response.End();
}
else
{
//上傳失敗
context.Response.Write("upload lose!");
context.Response.End();
}
}
catch
{
//上傳失敗
context.Response.Write("upload lose!");
context.Response.End();
}
//context.Response.Write("hello word");
}
public bool IsReusable {
get {
return false;
}
}
}
