首页
学习
活动
专区
工具
TVP
发布

《大胖 • 小课》- 不用 js 实现文件刷新上传

这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第3节-《不用 js 实现文件刷新上传》 专题已经更新章节: 《大胖 • 小课》- 我是这样理解文件上传原理的 《大胖 • 小课》- 写一个文件上传接口...从这节开始我们开始进行梳理前端各种文件上传的场景,尽量覆盖的更全面。 既然要说不用 js 实现文件刷新上传,那就要先说说最原始的文件上传,也就是在 ie 时代是怎么处理的。...最原始的文件上传 使用 form 表单上传文件 在 ie时代,如果实现一个刷新文件上传那可是费老劲了,大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定,在那个时代ie 就是最好用的浏览器...(不用 js 的刷新上传) - iframe 这里说的是在 ie 时代的上传文件局部刷新,借助 iframe 实现。...https://github.com/Bigerfe/fe-learn-code/tree/master/src/upfiles-demo/demo3 小结 本节主要是介绍了下在 ie 时代通常是怎样实现文件上传刷新上传

90120
您找到你想要的搜索结果了吗?
是的
没有找到

关于ajax刷新上传和下载

关于 ajax 刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的。 关于上传 使用 Flash, ActiveX 上传 ,略......所以这要说的是第三种结合 form 和 iframe 来实现,原理: 隐藏的 form 和 iframe , form 的 target 指向 iframe ,监听 iframe load ,来获取上传结果...优点:兼容该死的 ie 低版本浏览器 缺点:跨域上传不支持,还需自定义反向代理,因为 iframe onload 不支持跨域 上传接口 API: 成功返回: { code: 1, msg: '上传成功... <!...缺点:现代浏览器会自动识别文件类型,如 pdf,会自动在浏览器打开 优雅一点的下载: function download() { var a = document.createElement("a"

2.5K20

Asp.Net刷新上传并裁剪头像

开发网站几乎都做过上传图片并截图,做个刷新Asp.Net上传并截图示例 实现功能: 1.选择文件,自动上传并生成缩放图(上传带进度条),形成预览图 2.在预览区,实现鼠标拖拽截图区,截取图片(示例截图区按缩放图小边为截图正方形长度...---------------------------------------------------------------------------- 第一步:准备工作,认识一些必要的东西  1.刷新上传借助于...string cancelImg 取消按钮图片路径 string folder 上传文件夹路径 string multi 是否多文件上传 boolean script 上传文件处理代码的文件路径 json....png) string fileDesc 提示于点击上传弹出选择文件文件类型(自定义) string sizeLimit 上传大小限制(byte为单位) integer auto 是否选择文件后自动上传...    data:有四个属性   filesUploaded :上传了多少个文件   errors :出现了多少个错误   allBytesLoaded :总共上传文件的大小(因为它可以多文件上传

3.5K70

PHP+iframe模拟Ajax上传文件功能示例

本文实例讲述了PHP+iframe模拟Ajax上传文件功能。...分享给大家供大家参考,具体如下: 在xmlhttprequest level 1中,Ajax是不能够上传文件的,因为js不能操作本地文件,但是市场上有一些Ajax异步上传文件的插件,是怎么完成的呢?...答案:可以使用iframe模拟Ajax上传文件。接下来博主将使用iframe来模拟Ajax来上传文件。 首先看一下效果图: ? 文件结构图: ?...09-iframe-upload.html文件: 页面中有一个表单,表单中有一个上传文件按钮和提交按钮,点击提交按钮执行ajaxUpload函数,然后动态创建iframe标签,让其不可见,最后设置表单的...<body <h1 iframe模拟Ajax上传文件</h1 <h2 id="progress" </h2 <form action="09-<em>iframe</em>-upload.php"

1.5K61

文件上传的动作不能太俗,必须页面无刷新上传

常规操作上传文件 1 2 <input type="...相信很多大佬还在用上面这种简单粗暴的方式完成<em>文件</em><em>上传</em>的动作,哥哥,都什么时代了,还用这种方式,如果提交这样的代码上去,脸都会被打肿,我们要的是页面无<em>刷新</em><em>上传</em>哦,哈哈哈~~~~ 页面无<em>刷新</em><em>上传</em><em>文件</em> 完成这项优雅的操作...但是XMLHttpRequest Level 2针对这些缺陷做出良好的改进: 支持二进制数据, 可以<em>上传</em><em>文件</em>, 可以使用FormData对象管理表单....-- XMLHttpRequest实现异步<em>上传</em><em>文件</em> --> <input type="file" name="userfile" onchange="fileSelected(this);" multiple...相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回. } 1 /** 2 * 多文件上传 3 * @param file

1.6K70

Asp.Net 用Jquery和一般处理程序实现刷新上传文件

上传文件算是比较常规的一个功能,Asp.Net自带了一个上传控件 FileUpload ,简单易用但是体验不太好,所有开发者经常都会选择一个JS插件来进行上传,比如:Uploadify SWFupload...如果没有特别高的要求,也可以自已实现刷新有等待效果的上传......   默认大小为4096K,也就是4M; 如果大小超过限制会引发一个 ConfigurationErrorsException 异常; 对于图片上传来说4M基本能满足,但是对于文件上传来说,4M的最大上传限制明显不够..."http://www.w3.org/1999/xhtml"> Porschev--Asp.Net 使用Jquery和一般处理程序实现刷新上传文件...search_head"> Porschev--Asp.Net 使用Jquery和一般处理程序实现刷新上传文件

1.9K50

layui打开iframe窗口不刷新的问题

问题所在,我所用的layui后台管理系统的框架是之前遗留下来的,2017年的版本,iframe窗口不刷新的问题,也就是框架本身的缓存问题,现在layui针对这一问题已经升级版本,就不存在问题了。...先说一下要修改的地方:点击左侧的菜单栏(即打开一个新的iframe层页面),第一次打开的窗口会刷新,但是再次点击左侧菜单的时候就不会刷新了,每次这个页面获取到新的数据,iframe窗口里面都是有缓存的,...都需要手动F5刷新才会更新,因此带来不便。...改为:每次点击左侧菜单,都会触发一次刷新事件。 ? 解决办法:打开tab.js文件 1:在配置里面添上 autoRefresh:true ?...('div.layui-tab-content > div').eq(tabIndex).children('iframe')[0].contentWindow.location.reload();*/

3.7K20

iframe实现页面局部刷新原理解析

web开发实现页面的局部刷新的技术,除了比较常见的ajax,还有通过iframe来实现,这种方式和ajax有什么不同呢首先看一个用ajax技术实现的页面局部刷新的效果——表单登陆。...target指向了一个iframe元素,在iframe中打开action的url。 利用iframe方式,返回的数据与ajax返回的数据是不同的。来看一下iframe返回的后端php代码: <?...同样实现了页面的局部刷新,而且用的不是ajax技术。...原理是将表单提交后跳转的页面,指向本页的iframe标签中,iframe刷新后,返回的是后端输出的javascript标签包裹的js代码,而返回的javascript代码可以直接运行,并且可以操作父页面中的元素...封装原生ajax还得考虑兼容,iframe就不用考虑兼容性的问题,但ajax对比iframe会更加简洁明了。在ajax没有普及之前,web开发的局部刷新用的都是iframe

4.8K30

instantclick实现的全站刷新

instantclick是一个预加载的js文件,就是能提前加载网页内容的东西,他有几种模式,第一种就是鼠标放在超链接上就开始预加载,第二种就是鼠标放上去xx毫秒后(时间可自定义)进行预加载,第三种就是鼠标点击后进行预加载...这里不着重讲instantclick的使用方法,建议去官网查阅 搜索功能这样的非超链接怎么实现不刷新 在香菇的点拨之下,我们强行将搜索功能表单模式变成了超链接,效果如下 搜索功能.jpg 因为搜索结果地址一般为是站点地址加...typecho_ajax_comment.html 友人C文章:https://www.ihewro.com/archives/691/ 注意 本文中的所有代码都依靠jquery,且本文内容预加载模式只有选择第三种方法才能实现全站刷新

97210
领券