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库的最佳方法详细说明及实现代码
Dec 28 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
Javascript闭包实例详解
Nov 29 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
js编写选项卡效果
May 23 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
three.js如何实现3D动态文字效果
Mar 03 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
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP中is_file不能替代file_exists的理由
2014/03/04 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python实现事件驱动
2018/11/21 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
Django URL参数Template反向解析
2020/11/24 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
Python中的流程控制详解
2021/02/18 Python
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
运动会通讯稿100字
2014/01/31 职场文书
房产委托公证书
2014/04/08 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
师德先进个人材料
2014/12/20 职场文书
小孩不笨观后感
2015/06/03 职场文书
养成教育工作总结
2015/08/13 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
对Golang中的FORM相关字段理解
2021/05/02 Golang