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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery.form.js"></script>
<script type="text/javascript">
  $(function () {
   $("#btn").click(function () {
    $("#fm1").ajaxSubmit({
        url: "UpLoadImageHandler.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>

　　

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

using System;
using System.Web;

public class UpLoadImageHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        //获取上传的文件的对象
        HttpPostedFile img = context.Request.Files["btnfile"];
        //获取上传文件的名称
        string s = img.FileName;
        //截取获得上传文件的名称(ie上传会把绝对路径也连带上，这里只得到文件的名称)
        );
        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;
        }
    }
}

使用jQuery.form插件,实现完美的表单异步提交的更多相关文章

  1. 使用jQuery.form插件，实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  2. 使用jQuery，实现完美的表单异步提交

    jQuery异步提交表单 <form id="form1" method="post"> <table border="1" ...

  3. jquery.form插件中动态修改表单数据

    jquery.form jquery.form插件(http://malsup.com/jquery/form/)是大家经常会用到的一个jQuery插件,它可以很方便将表单转换为ajax的方式进行提交 ...

  4. jquery.form.js 使用以及问题（表单异步提交）

    标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...

  5. jquery让form表单异步提交

    1.监听表单提交事件,并阻止表单提交 $("form").submit(function(e) { return false;//阻止表单提交 }) 2.拿到表单内容 let da ...

  6. 表单 - Form - EasyUI提供的表单异步提交

    方案一 被提交的表单 <form id="loginForm" method="post"> <table align="cente ...

  7. jQuery——表单异步提交

    如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用jQuery做到异步提交表单:通过$("#form").serialize()将表单元素的数据转化为字符串,然后通过$ ...

  8. JQuery脚本-通过禁用按钮防止表单重复提交

    <script type="text/javascript"> /* jquer 脚本,避免重复提交 隐藏点击的submit,后在他之后插入同名button伪装成被隐藏 ...

  9. .net mvc中的表单异步提交

    // // 摘要: // 将 <form> 开始标记写入响应. // // 参数: // ajaxHelper: // AJAX 帮助器. // // actionName: // 将处理 ...

随机推荐

  1. CCF NOI系列活动

    NOI-全国青少年信息学奥林匹克竞赛全国青少年信息学奥林匹克竞赛(NOI)是国内信息学领域内面向中学生的最高水平的大赛,每省派经选拔产生的选手(其中一名是女选手)参加,NOI每年在不同的省市举行. N ...

  2. Mysql备份迁移——Mysqldump（.NET调用Mysqldump.exe方式）——（解决视图嵌视图报错）

    利用Mysqldump备份和迁移,我想很多人都用过,具体参数不介绍了,这里主要讲.NET调用Mysqldump进行备份和.NET调用Mysql.exe进行导入数据. 这里使用的是5.1版的Mysqld ...

  3. 注册页面JS前台校验

    运行效果图: HTML代码: <script> function checkForm(){ //校验用户名 //获得用户名文本框的值 var username=document.getEl ...

  4. 10G R2 参数文件相关

    CLUSTER_DATABASE Property Description Parameter type Boolean Default value false Modifiable No Range ...

  5. Js_Ajax_输入词提示

    输入"1",有提示,否则没有 suggest.jsp #suggest { background-color: #e0e0e0; width: 200px; } var xhr; ...

  6. 使用opencv设置图像的格式以及帧率

    最近楼主正在写一个关于图像存储的程序,LZ有一颗求知心,想要了解保存的图像的格式以及获取摄像头帧率.晚些时候会写一篇关于opencv获取摄像头并且保存每帧图像信息方法. 1.修改图像的像素显示: 首先 ...

  7. sencha touch 入门系列 （二）sencha touch 开发准备

    这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...

  8. (Forward) Music Player: From UI Proposal to Code

    Some developers have difficult to code when the UI proposal is a bit “sophisticated” or “complex”. M ...

  9. lintcode-【简单题】合并区间

    题目: 给出若干闭合区间,合并所有重叠的部分. 样例: 给出的区间列表 => 合并后的区间列表: [ [ [1, 3], [1, 6], [2, 6], => [8, 10], [8, 1 ...

  10. Mysql 小技巧

    查询出的日期 加一天,加一周,加一月,加一年 DAY)); WEEK)); MONTH)); YEAR)); 查询出的日期 减一天,减一周,减一月,减一年 DAY)); WEEK)); MONTH)) ...