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学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
基于vue中的scoped坑点解说
Sep 04 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运行时强制显示出错信息的代码
2011/04/20 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
原生实现一个react-redux的代码示例
2018/06/08 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
angular6的响应式表单的实现
2018/10/10 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
python字典的遍历3种方法详解
2019/08/10 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
镇创先争优活动总结
2014/08/28 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers