JavaScript实现无刷新上传预览图片功能


Posted in Javascript onAugust 02, 2017

无刷新上传功能如何实现?手写无刷新上传要用到两个东西,FormData和FileReader。

FileReader 用于图片浏览。

FormData 用于ajax请求。

html代码

先创建表单跟图片的容器

<form enctype="multipart/form-data" id="oForm">
    <input type="file" name="file" id="file" onchange="readAsDataURL()" />
    <input type="button" value="提交" onclick="doUpload()" />
  </form>
  <div>
    <img alt="" id="img"/>
  </div>

javascript代码

FormData:

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据, 因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输 的数据格式和表单通过submit() 方法传输的数据格式相同。

在这里FormData对象是用来获取form表单内的所有input数据,然后使用ajax请求发送数据到指定url,就不会出现表单提交时跳转的情况。

function doUpload() { 
     var formData = new FormData($( "#oForm" )[0]); 
     console.log(formData); 
     $.ajax({ 
       url: 'pp', 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (returndata) { 
         console.log(returndata); 
       }, 
       error: function (returndata) { 
         console.log(returndata); 
       } 
     }); 
  }

FileReader:

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容, 使用 File 或 Blob 对象指定要读取的文件或数据。

在这里FileReader对象是用来获取file上来的图片并把图片转换成Data URL形式显示在事先创建的 容器中。

function readAsDataURL(){
  //检验是否为图像文件
    var file = document.getElementById("file").files[0];
    if(!/image\/\w+/.test(file.type)){
      alert("看清楚,这个需要图片!");

      return false;
    }else{
    var reader = new FileReader();
    //将文件以Data URL形式读入页面
    reader.readAsDataURL(file);
    reader.onload=function(e){
      var result=document.getElementById("img");
      //显示文件
      result.src= this.result ;
    }
  }
}

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

Javascript 相关文章推荐
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现动态操作table行
Nov 23 jQuery
基于jquery实现多选下拉列表
Aug 02 #jQuery
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 #Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 #Javascript
javascript 取小数点后几位几种方法总结
Aug 02 #Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 #Javascript
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
angular $watch 一个变量的变化(实例讲解)
Aug 02 #Javascript
You might like
php 远程图片保存到本地的函数类
2008/12/08 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python subprocess模块详细解读
2018/01/29 Python
python实现图书管理系统
2018/03/12 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
上班睡觉检讨书
2014/01/09 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
十八大闭幕感言
2014/01/22 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
Java移除无效括号的方法实现
2021/08/07 Java/Android
HTML中的表单元素介绍
2022/02/28 HTML / CSS