首先我们需要做准备工作：

jquery下载：http://files.cnblogs.com/tianguook/jquery1.8.rar

jquery.form.js下载：http://files.cnblogs.com/tianguook/jquery.form.js

页面JqueryFormTest.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits="JqueryFormTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="JS/jquery-1.8.0.js" type="text/javascript"></script>

    <script src="JS/jquery.form.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn").click(function () {

                $("#fm1").ajaxSubmit({

                    url: "img.ashx",

                    type: "post",

                    success: function (data) {

                        alert(data);

                        //IE显示图片会默认加上<PRE></PRE>，着必须要把去除掉才能在低版本ie显示

                        data = data.replace("<PRE>", "").replace("</PRE>", "");

                        $("#divimg").append("<img src='" + data + "' width='200px' height='200px'/>");

                        //清空file控件里面的值

                        var file = $("#btnfile");

                        file.after(file.clone().val(""));

                        file.remove();

                    }

                });

            });

        })

    </script>

</head>

<body>

    <form id="fm1" method="post">

    <!--method="post"不能省略，在ie里面必不可少-->

    <input type="file" id="btnfile" name="btnfile" value="提交" />

    <br />

    <input type="button" id="btn" value="上传" />

    </form>

    <div id="divimg">

    </div>

</body>

</html>

img.ashx：

<%@ WebHandler Language="C#" Class="img" %>

using System;

using System.Web;

public class img : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/plain";

        //获取上传的文件的对象

        HttpPostedFile img = context.Request.Files["btnfile"];

        //获取上传文件的名称

        string s = img.FileName;

        //截取获得上传文件的名称(ie上传会把绝对路径也连带上，这里只得到文件的名称)

        string str = s.Substring(s.LastIndexOf("\\") + );

        string path = "~/upload/"+ str;

        //保存文件

        img.SaveAs(context.Server.MapPath(path));

        //HttpRuntime.AppDomainAppVirtualPath主要是获取应用程序虚拟路径名称，因为响应给页面时不会自动添加而导致无法显示图片

        context.Response.Write(HttpRuntime.AppDomainAppVirtualPath + path.Substring());//path.Substring(1)用来去除第一个~字符

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

asp.net使用jquery.form实现图片异步上传的更多相关文章

  1. jquery.form.js实现异步上传

    前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...

  2. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  3. jquery.form.js 实现异步上传

    前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post&q ...

  4. ThinkPHP+JQuery实现文件的异步上传

    前端代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  5. jquery.form 兼容IE89文件上传

    导入部分 <script type="text/javascript" src="js/jquery-1.8.3.min.js" charset=&quo ...

  6. ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

    我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...

  7. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  8. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  9. jquery.form.js ajax提交上传文件

    项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...

随机推荐

  1. 解决org.apache.jasper.JasperException: org.apache.jasper.JasperException: XML parsing error on file org.apache.tomcat.util.scan.MergedWebXml

    1.解决办法整个项目建立时采用utf-8编码,包括代码.jsp.配置文件 2.并用最新的tomcat7.0.75 相关链接: http://ask.csdn.net/questions/223650

  2. 每日踩坑 2018-09-29 .Net Core 控制器中读取 Request.Body

    测试代码: 结果: PostMan: 代码: private string GetRequestBodyUTF8String() { this.Request.EnableBuffering(); ; ...

  3. Codeforces.838D.Airplane Arrangements(思路)

    题目链接 \(Description\) 飞机上有n个位置.有m个乘客入座,每个人会从前门(1)或后门(n)先走到其票上写的位置.若该位置没人,则在这坐下:若该位置有人,则按原方向向前走直到找到空座坐 ...

  4. Slickflow.NET 开源工作流引擎高级开发(二) -- 流程快速测试增值服务工具介绍

    前言:流程是由若干个任务节点组成,流转过程就是从一个节点转移到下一个节点,通常需要不断切换用户身份来完成流程的测试,这样使得测试效率比较低下,本文从实战出发,介绍常见的两种快速测试方法,用于提升流程测 ...

  5. POP3_关于 multipart/related;boundary=

    http协议对mime类型有详细描述,multipart/....是单个消息头包含多个消息体的解决方案.multipart媒体类型对发送非文本的各媒体类型是有用的.目前常用的有这些subtype: M ...

  6. TeeChart 有用的属性

    //背景 BackWall.Gradient.Visible = True //是否显示右边图标选项 Legend.Visible = False //不在显示3D效果, 比较有用 View3D = ...

  7. VS2008 LINK : fatal error LNK1104: cannot open file 'atls.lib'错误解决方案

    用VS 2008编写ATL的64位应用程序时,提示链接错误:VS2008 LINK : fatal error LNK1104: cannot open file 'atls.lib' 问题原因 VS ...

  8. Delphi XE 6,Rad Studio XE 6 官方下载(附破解)

      官方光盘镜像下载: http://altd.embarcadero.com/download/radstudio/xe6/delphicbuilder_xe6_win.iso RAD Studio ...

  9. iOS 字符串 中包含 % 百分号的方法

    百分号的转换,NSString中需要格式化的字符串中百分号使用%%表示,而char*中百分号也是使用%%表示. 例如:NSLog(@"%%%@%%",@"hello&qu ...

  10. 学习 HTML+CSS 的书籍推荐

    1.<CSS那些事儿> 本书专注于CSS技巧实例的讲解,由浅入深地分析了CSS样式在布局时所需要理解的原理.绕开随处可见的基础知识.网络中能随意搜索到的hack技巧,侧重原理分析,拓展读者 ...