仿iframe效果Aajx文件上传实例


Posted in Javascript onNovember 18, 2016

前段时间在解决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文件上传实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
IE bug table元素的innerHTML
Jan 11 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
JavaScript之cookie技术详解
Nov 18 #Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 #Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 #Javascript
js实时获取窗口大小变化的实例代码
Nov 18 #Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 #Javascript
整理一下常见的IE错误
Nov 18 #Javascript
require、backbone等重构手机图片查看器
Nov 17 #Javascript
You might like
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
python自定义类并使用的方法
2015/05/07 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
WxPython实现无边框界面
2019/11/18 Python
python的setattr函数实例用法
2020/12/16 Python
python 递归相关知识总结
2021/03/03 Python
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
元旦联欢会感言
2014/03/04 职场文书
公司合作意向书
2014/04/01 职场文书
骨干教师培训方案
2014/05/06 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
运动会表扬稿范文
2015/05/05 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
python 爬取天气网卫星图片
2021/06/07 Python