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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
jquery分割字符串的方法
Jun 24 Javascript
微信小程序 教程之模板
Oct 18 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
基于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实现简单的语法高亮函数实例分析
2015/04/27 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
javascript事件绑定学习要点
2016/03/09 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
python实现倒计时小工具
2019/07/29 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
python中线程和进程有何区别
2020/06/17 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
师范应届生教师求职信
2013/11/05 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
师范生求职信
2014/06/14 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
mysql中关键词exists的用法实例详解
2022/06/10 MySQL
Nginx配置使用详解
2022/07/07 Servers