js无刷新上传文件
传统的文件上传方式
<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无刷新上传文件的更多相关文章
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
- ajax +jsp+iframe无刷新上传文件[转]
http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...
- web 开发之js---巧用iframe实现jsp无刷新上传文件
首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...
- $_FILES参数详解及简单<form>表单无刷新上传文件
$_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...
- jQuery+php+ajax实现无刷新上传文件功能
jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- Ajax 无刷新上传文件插件 uploadify 的使用
在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...
- ajax无刷新上传文件
网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点.只有ajax还不行,还需要JavaS ...
- python+ajaxFileUpload 无刷新上传文件
需要准备文件 http://pan.baidu.com/s/1bp4N3nL qqi0 html <script src="{% static 'js/jquery.js' %}& ...
随机推荐
- Python函数讲解
Python函数
- Angular2 管道
1. 说明 管道用来转换模板显示的内容,应用程序中经常出现获取数据,转换数据,显示数据的逻辑.管道就是用来在转换数据阶段起作用的.主要存在两种类型的管道,pure pipe和impure pipe 2 ...
- c#接口
//接口中方法 属性 事件等默认都是public 不允许用修饰符修饰 public interface IEventInterFace { string this[int index] { get; ...
- vux 表单提交数据 返回后页面跳转
ps:仅作参考
- dataset 修改小数点位数
#region dataset过滤器(修改小数点位数)导出使用 public DataSet ChangeDataSetValue(DataSet dataset) { foreach (DataTa ...
- 一个漂亮的上传按钮input[type=file]
;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- PHP文件上传相关
1.必须通过POST提交 2. 声明 enctype="multipart/form-data" $_FILES {[pic]=array ( [name]=> ...
- 特征描述之LBP
LBP 在数字图像处理和模式识别领域,LBP指局部二值模式,英文全称:Local Binary Patterns.最初功能为辅助图像局部对比度,并不是一个完整的特征描述子. 后来提升为一种有效的纹理描 ...
- Oracle的索引适用范围
若字段数据的重复率不是很高,而且数据量不是很大,考虑B树索引: 若字段数据的重复率较高,而且查询中有特定的查询方式(比如列之间有或,与等逻辑运算),则考虑位图索引: 若对列中的字段进行模糊查询或者语言 ...