页面：

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

        }

    }

}

ajax无刷新上传图片的更多相关文章

  1. TP3.2：实现Ajax无刷新上传图片

    1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果:   3.html代码: <html> <head> < ...

  2. Thinkphp框架 -- ajax无刷新上传图片

    用Thinkphp框架做无刷新上传图片 视图层 View <!doctype html> <html lang="en"> <head> < ...

  3. 无刷新上传图片，ajax 和 iframe

    iframe 上传 upload.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  4. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  5. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

  6. ajaxFileUpload.js 无刷新上传图片，支持多个参数同时上传，支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  7. php无刷新上传图片和文件

    核心思想:通过Html的iframe标签属性操作顶级窗口,再用php动态无刷新上传图片文件. 示例如下: demo |------uploads #存放上传的文件 |------index.php | ...

  8. Ajax.BeginForm()实现ajax无刷新提交

    1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...

  9. 使用SWFUpload无刷新上传图片

    使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET ...

随机推荐

  1. （转）Markov Chain Monte Carlo

    Nice R Code Punning code better since 2013 RSS Blog Archives Guides Modules About Markov Chain Monte ...

  2. VB6的函数指针传递

    Option Explicit Private Declare Function CallWindowProc Lib "user32" Alias "CallWindo ...

  3. Java注释Override、Deprecated、SuppressWarnings详解（过时方法，即将删除的方法或成员变量）

    Override 这个注释的作用是标识某一个方法是否覆盖了它的父类的方法.那么为什么要标识呢?让我们来看看如果不用Override标识会发生什么事情. Deprecated 这个注释是一个标记注释.所 ...

  4. jq+jsonp+ajax解决跨域问题

    Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 关于Jsonp更详细的资料请参考http://baike.baidu.com/ ...

  5. [内核]Takslet和Workqueue的应用场景

    转自:http://blog.chinaunix.net/uid-20382483-id-4077101.html tasklet Workqueue 处于atomic context,不能sleep ...

  6. 预处理语句--#define、#error和#warning

    1.#define语句 我们经常会这样定义一些宏:       #define BLOCK 8192 但这样的宏却不能在字符串中展开,如:    printf("The BLOCK numb ...

  7. httpd的警告

    1. httpd: apr_sockaddr_info_get() failed for serv05 这个是因为httpd.conf文件没有定义ServerName,所以会用hostname来代替, ...

  8. 最牛B的编码套路

    最近,我大量阅读了Steve Yegge的文章.其中有一篇叫“Practicing Programming”(练习编程),写成于2005年,读后令我惊讶不已:   与你所相信的恰恰相反,单纯地每天埋头 ...

  9. 洛谷P3383 【模板】线性筛素数

    P3383 [模板]线性筛素数 256通过 579提交 题目提供者HansBug 标签 难度普及- 提交  讨论  题解 最新讨论 Too many or Too few lines 样例解释有问题 ...

  10. TCP/IP协议学习笔记

    计算机网络基础知识复习汇总:计算机网络基础知识复习 HTTP协议的解析:剖析 HTTP 协议 一个系列的解析文章: TCP/IP详解学习笔记(1)-- 概述 TCP/IP详解学习笔记(2)-- 数据链 ...