JavaScript实现图片伪异步上传过程解析


Posted in Javascript onApril 10, 2020

实现逻辑

首先要知道, ajax无法发送带有文件的post请求所以,所以还是要用同步的方式,但是刷新的时候,我们不要在原来的页面刷新,去一个隐藏的iframe里面刷新,form表单中action正常填写处理文件上传的操作。紧着着的target填写一个隐藏的iframe。 这样表单提交之后,文件会被上传,被刷新页面为隐藏的iframe,因此用户看到的效果和ajax处理的效果是一样的。

dom结构

在这里有两个需要注意的地方,一是iframe是隐藏的,对用户不可见。二是form的target属性就是iframe的id属性,必须确保这个地方的一致,否则获取不到服务器的回传地址

<form action="#" method="post" enctype="multipart/form-data" target="hidden_frame" id='upload'>
<input type="file" name="pic" accept="image/gif;image/jpg;" />
</form>
<iframe style="display:none" name='hidden_frame' id="hidden_frame" style='display:none'></iframe>

图片预览

一般在图片上传之前,我们希望用户可以预览到上传之后的样子,这里有两种处理方式。一个是等图片上传成功之后,服务器返回图片的地址,将图片显示,由于中间的时间差很小,给用户一种错觉好像真的是在预览。第二种方式是在图片上传之前,获取input中的本地图片地址,然后显示,由于是显示本地的图片,所以没有时间差,实现真正的预览。简单的逻辑逻辑代码如下

$("#userHeadImg").change(function(event) {          
   var file = $(event.target)[0].files[0];
   var src = URL.createObjectURL(file);
   if(file){
    //表示获取到了图片
   }else{
    //表示点击了取消
   }
   //这里的src就是图片的地址,将它放在任意一个img标签的src属性里面   
});

开始上传

在onchange事件里面促发form的submit事件,上传图片

$("#upload").submit();

获取服务器回传的图片url

服务器将地址返回到iframe,iframe会被刷新。使用js监听iframe的onload,一旦有onload发生,就表示服务器回传了信息

var imgsrc=$(this).contents().find("pre").text();

增加上传文件类型限制

accept="image/gif;image/jpg;"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery实现div的tab切换实例代码
May 27 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
webpack4简单入门实例
Sep 06 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
Vue实现Layui的集成方法步骤
Apr 10 #Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 #Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 #Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 #Javascript
JS实现省市县三级下拉联动
Apr 10 #Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 #Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 #Javascript
You might like
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
对联广告js flash激活
2006/10/19 Javascript
Javascript typeof 用法
2008/12/28 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python timeit模块原理及使用方法
2020/10/10 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
财务会计毕业生自荐信
2013/11/02 职场文书
毕业证丢失证明
2014/01/15 职场文书
合作协议书模板2014
2014/09/26 职场文书
道歉的话怎么说
2015/05/12 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Golang并发操作中常见的读写锁详析
2021/08/30 Golang