如题所示,实现一个Ajax模式的文件上传有多难?这并不是一个疑问句,这是一个反问句。
在这里我先声明,不要认为一提到Ajax就是讲XHttpRequest, Ajax还要包括基于frame的操作,对!我说的是古老的frame。
xhttpRequest并不能实现文件上传,所以涉及到文件的上传,我们还得回到frame上,尤其是iframe。

需要的材料:
1,你掌握基本的Javascript技能。
2,一个隐藏的form和iframe,这里我分别命名为uploadForm和uploadResponse.
3,一个负责接收文件的页面,名字叫做UploadImage.aspx。
4,一个负责显示文件的页面,名字叫做File.aspx。

基本原理:
通过复制当前form(form1)中的input type=file 的html元素到另一个专用于文件上传的form(uploadForm)中,而切uploadForm的target指向到一个隐藏的iframe(uploadResponse)框架的name.这样,当执行uploadForm的submit()操作时,就会通过uploadResponse将uploadForm的内容post到UploadImage.aspx页面去执行,由于iframe元素uploadResponse及form元素uploadForm元素都是位于一个隐藏的div元素中,所以访问者自始至终都不会见到多余的东西。

实例:
Default.aspx页面。
>

如上所示,首先选择准备上传的文件,然后当你点击上传按钮(name为uploadButton)时,调用uploadImage函数,该函数的作用是复制form1的input type=file的imageFile元素到uploadForm中,并替换原始的imageFile的outerhtml(原因是javascript不支持修改input type=file的元素的value属性),当然还有显示可爱的上传进度条(这样显得我们既专业又酷)。

    }

当用户点击上传按钮时,工作转由UploadImage.aspx程序接手。
实现一个Ajax模式的文件上传功能有多难?  protected void Page_Load(object sender, EventArgs e)

通过HttpWebRequest对象,我们能够获得任何由客户端post或get到服务器端的数据,UploadImage.aspx页面的工作很简单,只负责接收post过来的文件,并保存到指定的位置(方便演示,我仅仅使用了SaveAs)。
另外,要注意到一点,由于是Ajax模式的文件上传,意味着你的程序要通过javascript反馈系统出现的问题,这里我通过一个名称为status的参数来返回出现的问题,0则为一切正常,1则为用户没有提供文件,2则为用户没有上传我指定的文件类型。
当用户上传的文件没有任何问题的时候,系统保存文件并返回状态0,并附加文件的显示路径,其他状态附属的信息则是错误信息。
现在回到Default.aspx来看如何接收UploadImage.aspx反馈回来的信息,这里要考虑到UploadImage.aspx是个页面,而且隶属与iframe元素uploadResponse,所以我们通过javascipt来访问uploadResponse的所属window的对象或函数的写法如下:
"<script language='javascript'> window.parent.uploadImageResponse(\"{{ status:0,message:'File.aspx?key=guid'}}\");<script>"
Default的接应脚本则如下:

仅仅是在对应的htm编辑器的内容中插入message附带的信息。

ok!!主要的难点我们都解决了。下面则是要让我们能够看到我们传上去的文件,如果不能实时看到,这个Ajax 文件上传就没啥意义了。
File.aspx页面的功能代码如下:
实现一个Ajax模式的文件上传功能有多难? protected void Page_Load(object sender, EventArgs e)
        }
OK!一切都完成了。
演示程序下载地址:
https://files.cnblogs.com/csharpsharper/CoolThingsShow.rar


实现一个Ajax模式的文件上传功能有多难?

博主推荐:

Ajax正在将我们带入到下一代的网络应用中。本书深入探讨了动态的网络应用,将Ajax和REST集成在一起作为单独的解决方案。一个很大的优势是,与Ajax相似,REST可以和现今存在的技术一起使用。现在上百万的客户端计算机都是基于Ajax的,上百万的服务器是基于REST的。. 无论你是否开发过Ajax应用程序,这都是一本理想的书。因为这本书描述了各种各样的模式和最好的实践经验。通过此书的学习,你可以快速地检查和校验你是否构造了一个高效的Ajax应用程序。...

实现一个Ajax模式的文件上传功能有多难?

相关文章:

  • 2021-11-20
  • 2022-12-23
  • 2021-06-09
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-10
  • 2022-12-23
猜你喜欢
  • 2022-02-06
  • 2021-07-24
  • 2022-02-20
  • 2022-12-23
  • 2022-03-01
  • 2022-02-07
  • 2021-05-17
相关资源
相似解决方案