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 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
深入了解JavaScript 私有化
May 30 Javascript
jQuery zTree插件快速实现目录树
Aug 16 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/11/14 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
smarty简单入门实例
2014/11/28 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
layui复选框限制选择个数的方法
2019/09/18 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
深入浅析python with语句简介
2018/04/11 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
法人授权委托书范本
2014/04/04 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
化工见习报告范文
2014/10/31 职场文书
初中家长评语和期望
2014/12/26 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Java实现聊天机器人完善版
2021/07/04 Java/Android
一文搞懂MySQL索引页结构
2022/02/28 MySQL