最近做项目遇到了些关于上传的功能模块,在网上找了很多关于上传的相关资料,找到了一个依赖于Jquery写的jquery.uploadify类库,这个类库的上传功能支持的非常全面,不过遗憾的是它是依赖于flash来处理上传,所以在页面中呈现不了传统的上传控件的浏览方式,因为项目需求必须以传统的<input type='file'/>形态模式出现在页面中!所以只好舍去jquery.uploadify类库强大功能,于是乎自己研究了一番。最终实现了一个静态上传的功能!好了,废话不多说,代码献上!如阁下有更好的建议欢迎强力拍砖!小弟不胜感激!
首先我的后台程序用的是ASP.NET
Javascript用到了Jquery类库
这里先给大家介绍下为什么叫伪Ajax方式上传,因为这个上传不会使当前页面产生刷新的效果,并且也没有用任何的Ajax技术,但是实现了页面无刷新的上传效果,因此小弟称为伪Ajax方式。呵呵,关子卖了很久了!介绍下这个核心吧!核心主要是利用<form>和<iframe>实现!相信对Web Html认识比较深的大虾们一定猜到个大概了吧!
前台:
File Upload
后台:
////// 页面加载.在这里我简单的写了下文件上传的处理Code/// /// /// protected void Page_Load(object sender, EventArgs e){ try { //获取当前Post过来的file集合对象,在这里我只获取了的文件控件 HttpPostedFile file = Request.Files["fileUp"]; if (file != null) { //当前文件上传的目录 string path = Server.MapPath("~/Test/"); //当前待上传的服务端路径 string imageUrl = path + Path.GetFileName(file.FileName); //当前文件后缀名 string ext = Path.GetExtension(file.FileName).ToLower(); //验证文件类型是否正确 if (!ext.Equals(".gif") && !ext.Equals(".jpg") && !ext.Equals(".png") && !ext.Equals(".bmp")) { //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址 Response.Write(""); Response.End(); } //验证文件的大小 if (file.ContentLength > 1048576) { //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址 Response.Write(""); Response.End(); } //开始上传 file.SaveAs(imageUrl); //这里window.parent.uploadSuccess()是我在前端页面中写好的javascript function,此方法主要用于输出异常和上传成功后的图片地址 //如果成功返回的数据是需要返回两个字符串,我在这里使用了|分隔 例: 成功信息|/Test/hello.jpg Response.Write(""); Response.End(); } else { //上传失败 Response.Write("upload lose!"); Response.End(); } } catch { //上传失败 Response.Write("upload lose!"); Response.End(); }}