asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)


Posted in Javascript onMay 05, 2016

本文实例讲述了asp.net+jquery.form实现图片异步上传的方法。分享给大家供大家参考,具体如下:

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

jquery 点击此处本站下载。

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("\\") + 1);
  string path = "~/upload/"+ str;
  //保存文件
  img.SaveAs(context.Server.MapPath(path));
  //HttpRuntime.AppDomainAppVirtualPath主要是获取应用程序虚拟路径名称,因为响应给页面时不会自动添加而导致无法显示图片
  context.Response.Write(HttpRuntime.AppDomainAppVirtualPath + path.Substring(1));//path.Substring(1)用来去除第一个~字符
 }
 public bool IsReusable {
  get {
   return false;
  }
 }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
利用python分析access日志的方法
Oct 26 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 #Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 #Javascript
使用jquery.form.js实现图片上传的方法
May 05 #Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 #Javascript
浅析JS异步加载进度条
May 05 #Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 #Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 #Javascript
You might like
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
使用PHP开发留言板功能
2019/11/19 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
FireFox JavaScript全局Event对象
2009/06/14 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
JS随机密码生成算法
2019/09/23 Javascript
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Django的性能优化实现解析
2019/07/30 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Python面向对象封装操作案例详解
2019/12/31 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
数据库基础的一些面试题
2012/02/25 面试题
外贸主管求职简历的自我评价
2013/10/23 职场文书
学习党章思想汇报
2014/01/07 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python