asp.net使用jquery.form实现图片异步上传
首先我们需要做准备工作:
jquery下载:http://files.cnblogs.com/tianguook/jquery1.8.rar
jquery.form.js下载:http://files.cnblogs.com/tianguook/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("\\") + );
string path = "~/upload/"+ str;
//保存文件
img.SaveAs(context.Server.MapPath(path));
//HttpRuntime.AppDomainAppVirtualPath主要是获取应用程序虚拟路径名称,因为响应给页面时不会自动添加而导致无法显示图片
context.Response.Write(HttpRuntime.AppDomainAppVirtualPath + path.Substring());//path.Substring(1)用来去除第一个~字符
} public bool IsReusable {
get {
return false;
}
} }
asp.net使用jquery.form实现图片异步上传的更多相关文章
- jquery.form.js实现异步上传
前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- jquery.form.js 实现异步上传
前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post&q ...
- ThinkPHP+JQuery实现文件的异步上传
前端代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- jquery.form 兼容IE89文件上传
导入部分 <script type="text/javascript" src="js/jquery-1.8.3.min.js" charset=&quo ...
- ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制
我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...
- jQuery插件之ajaxFileUpload异步上传
介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...
- html5图片异步上传/ 表单提交相关
1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...
- jquery.form.js ajax提交上传文件
项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...
随机推荐
- supervisor Error: Another program is already listening
Error: Another program is already listening on a port that one of our HTTP servers is configured to ...
- BZOJ 3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队 动态规划
3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=34 ...
- haskell学习资料
Haskell基础语法 Real World Haskell 中文版 Haskell趣学指南
- vue项目开发之v-for列表渲染的坑
不知道大家在用vue开发的过程中有没有遇到过在使用v-for的时候会出现大片的黄色警告,比如下图: 其实这是因为没有写key的原因 :key是为vue的响应式渲染提供方法,在列表中单条数据改变的情况下 ...
- Android深入浅出之Binder机制(转)
Android深入浅出之Binder机制 一 说明 Android系统最常见也是初学者最难搞明白的就是Binder了,很多很多的Service就是通过Binder机制来和客户端通讯交互的.所以搞明白B ...
- POJ 1741 Tree (树分治入门)
Tree Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 8554 Accepted: 2545 Description ...
- Synchronize Ultimate
支持多种服务器和主流云网盘进行同步 http://www.icecoldapps.com/ Unlock Code : xda201506 Unlock Code : icecoldapps20150 ...
- 谨慎注意WebBrowser控件的DocumentCompleted事件
引言 WebBrowser控件的DocumentCompleted事件一般就被认定为是在页面完全加载完毕后产生,而注释中也是这么写的: 但事实却并非如此. 首先它不一定会在完全加载完毕时才触发,有时就 ...
- 虫趣:BAD POOL CALLER (par1: 0x20)
[作者:张佩] [原文:http://www.yiiyee.cn/Blog/0x19-1/] 内核在管理内存的时候,为了提高内存使用效率,对于小片内存的申请(小于一个PAGE大小),都是通过内存池来操 ...
- Nginx FastCGI的运行原理
http://www.cnblogs.com/yinshoucheng-golden/p/6474034.html