仿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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
vue axios整合使用全攻略
May 24 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 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
PHP令牌 Token改进版
2008/07/18 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
php实现水仙花数示例分享
2014/04/03 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
浅谈Vue.js
2017/03/02 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python如何为图片添加水印
2016/11/25 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python如何在DataFrame增加数值
2020/02/14 Python
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
个人作风建设总结
2014/10/23 职场文书
爱的教育读书笔记
2015/06/26 职场文书