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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
js图片自动切换效果处理代码
May 07 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
jquery实现倒计时功能
Dec 28 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 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获取数组中重复数据的两种方法
2013/06/28 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
Vuex 入门教程
2018/01/10 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
简单实现python爬虫功能
2015/12/31 Python
python+opencv识别图片中的圆形
2020/03/25 Python
python实现自动登录
2018/09/17 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
python脚本和网页有何区别
2020/07/02 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
django rest framework使用django-filter用法
2020/07/15 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
python中pyplot基础图标函数整理
2020/11/10 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
护理学中专毕业生求职信
2013/11/11 职场文书
部队学习十八大感言
2014/01/11 职场文书
开业主持词
2014/03/21 职场文书
小学生校园广播稿
2014/09/28 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
如何用python插入独创性声明
2021/03/31 Python
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python