这是数月前的事情了，场景是这样的： 在进行图片上传的时，我发现开发人员使用的上传图片方式是Iframe + 传统的 http post 来处理的。而且未建立统一上传函数。于是将代码改造了。心想来个ajax异步上传图片吧，这技术应该很老套了。于是直接打开强大的cnblogs轻松的找到了
这篇文章
直接依葫芦画瓢，将该作者的劳动成果直接“拿来主义了”。很快就把代码全改造了。可是当我把程序发布到服务器上的时问题来了。上传文件失效了！汗～ 都是偷懒造成的恶果。继续打开先前参考的那篇文章。原来作者解释了只能在本地使用而不能发布到服务器上。心想我难道还得用 iframe + http post 这个 郁闷的方式么？？
于是不甘心的我打开了更加强大的google，开始全球搜索寻求解决方案，终于功夫不负有心人。找到了 “jquery.form.js” （其实内部还是iframe）。
异步上传图片的步骤如下：
1.引用 jquery js 框架（这东西的好处无需多论）后再引用 “jquery.form.js”。
2.建立一般处理程序 ashx。
核心代码如下：
html:
1
<
asp:Content ID
=
”
Content3
”
ContentPlaceHolderID
=
”
Head
”
runat
=
”
server
”
>
2
<
script src
=
”
<%=Url.Content(
”
~/
Scripts
/
jquery
–
1.4
.
1
.js
”
) %>
”
type
=
”
text/javascript
”
></
script
>
3
<
script src
=
”
<%=Url.Content(
”
~/
Scripts
/
jquery.form.js
”
) %>
”
type
=
”
text/javascript
”
></
script
>
4
<
script type
=
”
text/javascript
”
>
5
$(function () {
6
//
上传图片
7
$(
”
#btnUpload
”
).click(function () {
8
if
($(
”
#flUpload
”
).val()
==
“”
) {
9
alert(
”
请选择一个图片文件，再点击上传。
”
);
10
return
;
11
}
12
$(
‘
#UpLoadForm
‘
).ajaxSubmit({
13
success: function (html, status) {
14
var result
=
html.replace(
”
<pre>
”
,
“”
);
15
result
=
result.replace(
”
</pre>
”
,
“”
);
16
$(
”
#image
”
).attr(
‘
src
‘
, result);
17
alert(result);
18
}
19
});
20
});
21
});
ashx 如下：
1
namespace
TestMvc.Utility
2
{
3
///
<summary>
4
///
Summary description for PicUploadHander
5
///
</summary>
6
public
class
PicUploadHander : IHttpHandler
7
{
8
9
public
void
ProcessRequest(HttpContext context)
10
{
11
context.Response.ContentType
=
”
text/plain
”
;
12
//
验证上传的权限TODO
13
string
_fileNamePath
=
“”
;
14
try
15
{
16
_fileNamePath
=
context.Request.Files[
0
].FileName;
17
//
开始上传
18
string
_savedFileResult
=
UpLoadImage(_fileNamePath, context);
19
context.Response.Write(_savedFileResult);
20
}
21
catch
22
{
23
context.Response.Write(
”
上传提交出错
”
);
24
}
25
}
注：整个上传使用ajax 异步数据，同时jquery回调出上传成功后图片在服务器上的相对路径。总的来说此方式相对传统的上传图片方式要强一些。
本例代码
在此
下载，
FireFox 下测试通过
。
转载于:https://www.cnblogs.com/ryanding/archive/2010/10/31/1865630.html