这次给大家带来asp.net+jquery.form做出图片异步上传功能,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>, );
$(#pimg).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>
<p id="pimg">
</p>
</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中$(function() {})使用案例
jquery获取radio选中值方法详解
以上就是asp.net+jquery.form做出图片异步上传功能的详细内容。