<!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;
}
}
}