软件信息网 移动端开发 异步上传文件

异步上传文件

最近公司任务多,MVC 和 C#系列都没更新,不过折腾了下异步上传,其实挺简单的,不过以前没做过,打算记录下来方便以后用到,同时分享给需要的朋友,中间也遇到一些疑难杂症,所以也浪费了点时间。我先把现实的代码给出来,在后面会提出一个问题,希望各位能帮瓶子解决下。

 

为了照顾一些新人,我一步一步的把实现过程说出来:

下面这里有段HTML,我没有用html.hepler,其实做法差不多:

异步上传文件插图 View Code

这里有两个注意点form的属性设置,第一,要是Post方式的提交,第二,enctype属性设置为multipart/form-data;缺少一个都会导致后台Request.Files不到文件。

接下来就是后台处理:

异步上传文件插图1 View Code

 

首先,要对Request.Files做一些判断进行对应提示,接着就是通过虚拟路径转成服务器是上物理路径,也就是文件的保存路径,最后SaveAs那个路径就可以了。其实整个处理的大概分三步吧。第一步。Request.Files,第二步Server.MapPath拿到路径,第三步SaveAs就就可以了。这里有两个地方要注意,第一,保证你的路径存在的,如果没有就创建一个用 Directory.CreateDirectory(path),不然会报错。第二,路径名也需要保存文件的文件名,不然也会报错。

到这里就可以实现一个同步的上传了,为了用户体验更好,我们加入jq实现异步:

 

异步上传文件插图2 View Code

 

记得在前面引用js文件:

<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/jquery.form.js"></script>

这样一个简单的异步提交就实现了,在后台处理的时候,还获取了上传文件的虚拟路径,在返回到页面的时候用a标签显示出来,保存进数据库的时候直接$("a").attr('href')就可以拿到路径了,最好加上域名。

写到这里也差不多了。这个是我做的demo,点击下载。有什么问题,欢迎在评论提出来。另外,我这用的是ASPX视图的,如果用CSHTML(RAZOR)来做这个例子,注意模板的已经引用jquery-1.7.1.js文件,如果你在视图没有写 Layout = NULL,并且再引用一次JS文件就会引起对象不支持“ajaxSubmit”属性或方法 这个错误。

作者: 软件定制开发

李铁牛,一直致力于企业客户软件定制开发,计算机专业毕业后,一直从事于互联网产品开发到现在。系统开发,系统源码:15889726201
上一篇
下一篇
联系我们

联系我们

15889726201

在线咨询: QQ交谈

邮箱: 187395037@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部