logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

无刷新的上传： jQuery form

 悟静 2012-02-16

各种各样的文件上传

在开发中，除了使用 FileUpload 之外，我们还有很多的方法用来实现上传文件，有的甚至不需要我们在服务器端进行特殊的操作就可以显示上传的进度。

2.6.1　无刷新的上传： jQuery form

使用 FileUpload 是需要刷新页面的，在当前的 Web 2.0 之下，显然有点不合时宜。jQuery form 可以实现无刷新的文件上传。项目的地址：http:///jquery/form/。

jQuery form 是一个脚本库，它通过在页面中动态嵌入一个iFrame，使用iFrame去上传文件，来实现无页面刷新的文件上传。不过，服务器端的处理其实就是正常的文件上传过程，我们可以直接使用 ASP.NET 内置的上传处理。一定要记得设置足够大的请求大小。

使用方式如下：

1）创建一个标准的上传文件表单。

  1. <form id="myForm" action="comment.php" method="post"> 
  2.     Name: <input type="text" name="name" /> 
  3.     Comment: <textarea name="comment"></textarea> 
  4.     <input type="submit" value="Submit Comment" /> 
  5. </form> 

2）在页面中加入脚本。

  1. <html> 
  2. <head> 
  3.     <script type="text/javascript" src="jquery-1.3.2.js"></script> 
  4.     <script type="text/javascript" src="jquery.form.js"></script> 
  5.  
  6.     <script type="text/javascript"> 
  7.         // wait for the DOM to be loaded  
  8.         $(document).ready(function() {  
  9.             // bind 'myForm' and provide a simple callback function  
  10.             $('#myForm').ajaxForm(function() {  
  11.                 alert("Thank you for your comment!");  
  12.             });  
  13.         });  
  14.     </script> 
  15. </head> 

需要注意的是，服务器返回的 ContentType，由于在使用 iFrame 实现上传的时候，服务器返回的内容将会被赋予这个 iFrame，所以，返回内容的类型最好是 HTML或者 XML，如果是返回 JSON 或者脚本的话，可以使用 textarea 包围起来。

  1. <textarea> 
  2.     for (var i=0; i < 10; i++) {  
  3.         // do some processing  
  4.     }  
  5. </textarea> 

脚本库的下载地址：http:///jquery/form/#download。

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 悟静 > 《.net和asp.net》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多