ajax无刷新上传图片

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

}
来源：https://www.cnblogs.com/zcttxs/p/3180509.html
标签
js刷新当前页面
ajax
传照片