无刷新上传图片

来源：互联网发布：深入浅出java并发包编辑：程序博客网时间：2024/05/16 18:19

前台html代码：

<!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;public class IbeaconHandler : IHttpHandler {        public void ProcessRequest (HttpContext context) {        //context.Response.ContentType = "text/plain";//需要注释了，否则会将script脚本输出，而不是调用父类的方法        //context.Response.Write("Hello World");        //string fname = context.Request.QueryString["name"].ToString();                try        {            //获取当前Post过来的file集合对象,在这里我只获取了<input type='file' name='fileUp'/>的文件控件            HttpPostedFile file = context.Request.Files["fileUp"];            if (file != null)            {                //当前文件上传的目录                //string path = context.Server.MapPath("~/images/");                string path = context.Server.MapPath("~/images/");                //当前待上传的服务端路径                string imageUrl = path + System.IO.Path.GetFileName(file.FileName);                //当前文件后缀名                string ext = System.IO.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 type=\"text/javascript\">window.parent.uploadSuccess('上传成功!|../images/" + file.FileName + "');</script>");                context.Response.End();            }            else            {                //上传失败                context.Response.Write("上传失败!");                context.Response.End();            }        }        catch        {            //上传失败            context.Response.Write("上传失败!");            context.Response.End();        }            }     public bool IsReusable {        get {            return false;        }    }}

摘自：http://www.cnblogs.com/zcttxs/archive/2013/07/09/3180509.html

0 0