传统的文件上传方式

<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit"/>
</form>

在执行上传后,页面会跳转到action指定的地址。

一般用户需要使用无页面刷新的上传方式上传文件,此时可采取iframe的方式,将form表单提交后的返回内容,重定向到iframe中。

修改后的代码为

<form action="" method="POST" target="target" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit"/>
</form> <iframe name="target" id="target" frameborder="0" width="0" height="0"></iframe> <script>
var iframe = document.getElementById("target");
var uploadCallback = function () {
console.log(iframe.contentDocument.body.innerHTML);
};
iframe.onload = uploadCallback;
</script>

利用iframe的onload事件,检测是否传输完毕,并获取传输后的服务端返回值。

示例非常简单,会有浏览器不兼容的情况,但上传插件的基本思想如此。

此外还有swf方式的实现方式,可现实上传速度以及进度等信息。

js无刷新上传文件的更多相关文章

  1. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  2. ajax +jsp+iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  3. web 开发之js---巧用iframe实现jsp无刷新上传文件

    首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...

  4. $_FILES参数详解及简单<form>表单无刷新上传文件

    $_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...

  5. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  6. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  7. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  8. ajax无刷新上传文件

    网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点.只有ajax还不行,还需要JavaS ...

  9. python+ajaxFileUpload 无刷新上传文件

    需要准备文件 http://pan.baidu.com/s/1bp4N3nL   qqi0 html <script src="{% static 'js/jquery.js' %}& ...

随机推荐

  1. Python函数讲解

    Python函数

  2. Angular2 管道

    1. 说明 管道用来转换模板显示的内容,应用程序中经常出现获取数据,转换数据,显示数据的逻辑.管道就是用来在转换数据阶段起作用的.主要存在两种类型的管道,pure pipe和impure pipe 2 ...

  3. c#接口

    //接口中方法 属性 事件等默认都是public 不允许用修饰符修饰 public interface IEventInterFace { string this[int index] { get; ...

  4. vux 表单提交数据 返回后页面跳转

    ps:仅作参考

  5. dataset 修改小数点位数

    #region dataset过滤器(修改小数点位数)导出使用 public DataSet ChangeDataSetValue(DataSet dataset) { foreach (DataTa ...

  6. 一个漂亮的上传按钮input[type=file]

    ;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...

  7. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  8. PHP文件上传相关

    1.必须通过POST提交 2. 声明 enctype="multipart/form-data"   $_FILES {[pic]=array ( [name]=>     ...

  9. 特征描述之LBP

    LBP 在数字图像处理和模式识别领域,LBP指局部二值模式,英文全称:Local Binary Patterns.最初功能为辅助图像局部对比度,并不是一个完整的特征描述子. 后来提升为一种有效的纹理描 ...

  10. Oracle的索引适用范围

    若字段数据的重复率不是很高,而且数据量不是很大,考虑B树索引: 若字段数据的重复率较高,而且查询中有特定的查询方式(比如列之间有或,与等逻辑运算),则考虑位图索引: 若对列中的字段进行模糊查询或者语言 ...