摘要:在进行图片上传的时,我发现开发人员使用的上传图片方式是Iframe + 传统的 http post 来处理的。而且未建立统一上传函数。于是将代码改造了。心想来个ajax异步上传图片吧,这技术应该很老套了。于是直接打开强大的cnblogs轻松的找到了jQuery实战教程直接依葫芦画瓢,将该作者的劳动成果直接“拿来主义了”。很快就把代码全改造了。可是当我把程序发布到服务器上的时问题来了。上传文件失效了!汗~ 都是偷懒造成的恶果。继续打开先前参考的那篇文章。原来作者解释了只能在本地使用而不能发布到服务器上。心想我难道还得用 iframe + http post 这个 郁闷的方式么??
在进行图片上传的时,我发现开发人员使用的上传图片方式是Iframe + 传统的 http post 来处理的。而且未建立统一上传函数。于是将代码改造了。心想来个ajax异步上传图片吧,这技术应该很老套了。于是直接打开强大的cnblogs轻松的找到了jQuery实战教程直接依葫芦画瓢,将该作者的劳动成果直接“拿来主义了”。很快就把代码全改造了。可是当我把程序发布到服务器上的时问题来了。上传文件失效了!汗~ 都是偷懒造成的恶果。继续打开先前参考的那篇文章。原来作者解释了只能在本地使用而不能发布到服务器上。心想我难道还得用 iframe + http post 这个 郁闷的方式么??
于是不甘心的我打开了更加强大的google,开始全球搜索寻求解决方案,终于功夫不负有心人。找到了 "jquery.form.js" 。
异步上传图片的步骤如下:
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回调出上传成功后图片在服务器上的相对路径。总的来说此方式相对传统的上传图片方式要强一些。
希望这篇文章可以帮助到你。总之,同学们,你想要的职坐标IT频道都能找到!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号