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两行代码按指定格式输出日期时间
Oct 21 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python深入学习之上下文管理器
2014/08/31 Python
python的类方法和静态方法
2014/12/13 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
python生成式的send()方法(详解)
2017/05/08 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
乡镇个人对照检查材料
2014/08/22 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
服务明星事迹材料
2014/12/29 职场文书
婚宴新郎致辞
2015/07/28 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
Python字典的基础操作
2021/11/01 Python