用iFrame模拟Ajax上传文件

$.post直接上传图片是不可行的
服务器君一共花费了152.705 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

前段时间在解决ajax上传文件时折腾了好一阵。直接用$.post上传文本信息肯定是没有问题的。但是$.post直接上传图片是不可行的。

后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法也有利用flash的。flash确实是个好方法 但是不是每个人都会flash的而且下载下来现成的方法要做修改也不是件易事,且文件相对较大。最后只好模拟iframe来实现。发现相当的简单。

html:

<iframe name="ajaxUpload" style="display:none"></iframe>
<form name="from1" id="from1" method="post" action="url"  enctype="multipart/form-data" target="ajaxUpload">
<table>
   <tr>
      <td>附件:</td>
      <td><input type="file" id="document" name="document"/></td> 
   </tr> 
</table> 
</form>

这里是重点。要上传文件enctype这个属性不可少,target的值改为iframe的name的值。

下面写一下js代码,我是用的jQuery所以在用的时候载入jquery的库是必不可少的。

$(function(){
        if($.browser.msie){
             window.form1.submit();}else{
             $("#form1").submit();}
       });

这里是做了一个浏览器版本的判断,因为IE是不太符合规范的一个浏览器,尤其是IE6。IE6是不直接支持$("#idName").submit();这种方式的。

服务端如下,还得返回一个值,直接submit是无法返回值的

public void Upload()
{
    HttpPostedBase ff=Request.Files["document"];//这里是获取上传的文件流,也可以用索引值来表示如果是多个文件的话
   	string fileName=System.DateTime.Now+ff.FileName.ToString();   //这里取出来的文件名是没有后缀的,所以要保存的话还需要取出文件拓展名。这里就不写过细,只是为描述这样一个思路。
    try
	{
   		SaveAs(documentPath+fileName+extendtionName); 
     	Response.Write("<script type='text/javascript' type='language'>parent.window.callBackMethod('上传成功');</scrpt>");
	} 
  	catch
   	{
     	Response.Write("<script type='text/javascript' type='language'>parent.window.callBackMethod('上传失败');</scrpt>");  //parent.window.methodName();这个是JS调用父页的方法。因为现在模拟一个iframe上传文件,这个iframe的作用就是一个中间站的作用。在父页点击上传后通过target会将页面文档流传入iframe中再上传服务端作处理。服务端有响应之后然后再在iframe里面显示出来,而不是直接在父页面显示出结果。这里可能就是一个alert()弹出一个对话框提示一下,如果是这样那么不调父页方法也行。如果想把这提示的内容丰富一点比如弹出个类似人人网的蓝色的对话框之类的。
     } 
} 

模拟iframe其实是页面局部更新,但是页面中的这个iframe没有内容而且还是不显示的,所以它刷新了完全不会影响到整个页面。

本文地址:http://www.nowamagic.net/librarys/veda/detail/1277,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1277

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《C专家编程》 林登 (LinDen.P.V.D) (作者), 徐波 (译者)

《C专家编程》展示了最优秀的C程序员所使用的编码技巧,并专门开辟了一章对C++的基础知识进行了介绍。书中C的历史、语言特性、声明、数组、指针、链接、运行时、内存以及如何进一步学习C++等问题进行了细致的讲解和深入的分析。全书撷取几十个实例进行讲解,对C程序员具有非常高的实用价值。《C专家编程》可以帮助有一定经验的C程序员成为C编程方面的专家,对于具备相当的C语言基础的程序员,《C专家编程》可以帮助他们站在C的高度了解和学习C++。

更多计算机宝库...