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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
javascript常用方法汇总
2014/12/02 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
js实现录音上传功能
2019/11/22 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
树莓派升级python的具体步骤
2020/07/05 Python
python 将Excel转Word的示例
2021/03/02 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
《蓝色的树叶》教学反思
2014/02/24 职场文书
教师考察材料范文
2014/06/03 职场文书
企业标语大全
2014/07/01 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
一篇文章弄懂Python中的内建函数
2021/08/07 Python