页面：

<!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. oracle审计详解-转

    http://blog.chinaunix.net/u2/66903/showart_2082884.htmlOracle使用大量不同的审计方法来监控使用何种权限,以及访问哪些对象.审计不会防止使用这 ...

  2. 如果在代码中使用JS

    protected void Page_Load(object sender, EventArgs e)    {        //获得.js文件        string myscript = ...

  3. 第三节：视图（Views）和模板（Templates）

    目录 概览 编写视图 编辑视图实际做一些事情 抛出404异常 使用模板系统 移除在代码中的硬编码网址 Url名称的命名空间 概览 视图是Django应用的网页的“类型”,一般服务于特定的功能并且有特定 ...

  4. 每日学习心得：Js基本数据类型常用方法扩展

    2014-02-17 前言: 节后的第一周上班,整个状态调整的还不错,已完全进入正常的工作状态.这一周主要还是对年前项目存在的一些问题进行完善.修整,基本上没有做大的改动.这里就把项目中经常用到的一些 ...

  5. 使用代理(WebProxy）爬虫

    关键代码: private Hashtable hash;//储存代理ip private WebProxy currentdaili; private int dailiExecMaxCount; ...

  6. vs2010中使用Nunit测试c#代码结果的正确性

    本文转载自:http://blog.csdn.net/pukuimin1226/article/details/8112151 http://www.nunit.org/index.php?p=dow ...

  7. ios webview中关于宽高的总结

    测试一 测试的物料: <html> <head> <meta charset="UTF-8"> <meta name="view ...

  8. Hadoop学习12-配置集群环境

    由于之前虚拟机都是用的桥接方式,有时候没有网络可用,想学习的时候,就狠不方便. 于是研究了一下,希望搭建一个多台虚机组成一个局域网的集群,即host-only方式 1.安装VM,网络选择“host-o ...

  9. NeHe OpenGL教程 第四十五课：顶点缓存

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  10. html5 canvas simple drawing

    var c = canvas.getContext("2d");//get canvas 2d context canvas including a proposed 3D con ...