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判断屏幕分辨率的代码
Jul 16 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
vue之数据交互实例代码
Jun 16 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
vue实现商品列表的添加删除实例讲解
May 14 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
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
快速入手Python字符编码
2016/08/03 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python中is和==的区别详解
2018/11/15 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Python request中文乱码问题解决方案
2020/09/17 Python
python利用线程实现多任务
2020/09/18 Python
比驿:全球酒店比价网
2018/06/20 全球购物
个人简历自我评价范文
2014/02/04 职场文书
铁路工务反思材料
2014/02/07 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
工程管理英文求职信
2014/03/18 职场文书
黄石寨导游词
2015/02/05 职场文书
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang