仿iframe效果Aajx文件上传实例

 更新时间:2016年11月18日 09:26:59   投稿:jingxian  
下面小编就为大家带来一篇仿iframe效果Aajx文件上传实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前段时间在解决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没有内容而且还是不显示的,所以它刷新了完全不会影响到整个页面。

以上这篇仿iframe效果Aajx文件上传实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jquery EasyUI的formatter格式化函数代码

    jquery EasyUI的formatter格式化函数代码

    以下实例格式化数据表格中的一列。如果金额小于20时使用自定义的格式器将文本变成红色。
    2011-01-01
  • jQuery事件绑定.on()简要概述及应用

    jQuery事件绑定.on()简要概述及应用

    前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看源码发现bind()和delegate()都是由on()实现的,感兴趣的朋友可以了解下,或许本文对你有所帮助
    2013-02-02
  • jQuery自动切换/点击切换选项卡效果的小例子

    jQuery自动切换/点击切换选项卡效果的小例子

    我们看到很多网站会有有错误404页面,当页面不存存时就会提示,然后过几秒就会自动跳到首页了,下面我来给大家举一个404错误页面跳到首页实例,有需要的朋友可以参考一下
    2013-08-08
  • jquery实现去除重复字符串的方法小结

    jquery实现去除重复字符串的方法小结

    这篇文章主要介绍了jquery实现去除重复字符串的方法,结合实例形式总结了三种常用的字符串去重操作技巧,需要的朋友可以参考下
    2016-04-04
  • jQuery UI工具提示框部件Tooltip Widget

    jQuery UI工具提示框部件Tooltip Widget

    这篇文章介绍了jQuery UI工具提示框部件Tooltip Widget,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • jQuery实现的手机发送验证码倒计时效果代码分享

    jQuery实现的手机发送验证码倒计时效果代码分享

    这篇文章主要为大家详细介绍了jQuery实现手机注册发送验证码倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • jQuery实现的简单前端搜索功能示例

    jQuery实现的简单前端搜索功能示例

    这篇文章主要介绍了jQuery实现的简单前端搜索功能,涉及jQuery事件响应与页面元素遍历、匹配、动态设置等相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • jQuery+PHP实现可编辑表格字段内容并实时保存

    jQuery+PHP实现可编辑表格字段内容并实时保存

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库;当点击“取消”按钮,则页面恢复到初始状态,需要的朋友可以参考下
    2015-10-10
  • jQuery模拟实现天猫购物车动画效果实例代码

    jQuery模拟实现天猫购物车动画效果实例代码

    最近在项目开发中遇到这样的需求,点击购买按钮,模拟抛物线将物品弹到购物车里,购物车添加物品后,显示+1动画。效果非常棒,接下来小编把实例代码分享到脚本之家平台,需要的的朋友参考下吧
    2017-05-05
  • jquery.cookie.js的介绍与使用方法

    jquery.cookie.js的介绍与使用方法

    相信大家都知道jquery.cookie.js是一个轻量级的cookie 插件,可以读取、写入、删除 cookie。下面这篇文章就来给大家简单的介绍下关于jquery.cookie.js的介绍与使用方法,需要的朋友可以参考借鉴,一起来看看吧。
    2017-02-02

最新评论