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对class属性的操作实现按钮开关效果
Oct 11 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 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
模拟xcopy的函数
2006/10/09 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
公务员政审个人鉴定
2014/02/25 职场文书
小学生暑假家长评语
2014/04/17 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
安全生产先进个人总结
2015/02/15 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript