热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这篇文章主要为大家详细介绍了JavaScript实现无刷新上传预览图片功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

FileReader 用于图片浏览。

FormData 用于ajax请求。

html代码

先创建表单跟图片的容器

  
    
    
  
  

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 ;
    }
  }
}

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


推荐阅读
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 深入解析Tomcat:开发者的实用指南
    深入解析Tomcat:开发者的实用指南 ... [详细]
  • 在处理大规模并发请求时,传统的多线程或多进程模型往往无法有效解决性能瓶颈问题。尽管它们在处理小规模任务时能提升效率,但在高并发场景下,系统资源的过度消耗和上下文切换的开销会显著降低整体性能。相比之下,Python 的 `asyncio` 模块通过协程提供了一种轻量级且高效的并发解决方案。本文将深入解析 `asyncio` 模块的原理及其在实际应用中的优化技巧,帮助开发者更好地利用协程技术提升程序性能。 ... [详细]
  • 探索JavaScript倒计时功能的三种高效实现方法及代码示例 ... [详细]
  • Django框架进阶教程:掌握Ajax请求的基础知识与应用技巧
    本教程深入探讨了Django框架中Ajax请求的核心概念与实用技巧,帮助开发者掌握异步数据交互的方法,提升Web应用的响应速度和用户体验。通过实例解析,详细介绍了如何在Django项目中高效实现Ajax请求,涵盖从基础配置到复杂场景的应用。 ... [详细]
  • 前面简单总结了js的基本语法,其实js语法和java、C语言语法有很多的相同之处;接下来将总结js在WEB浏览器中的运用,这部门将要了解的 ... [详细]
  • 在处理大文件上传时,服务端为何无法直接接收?这主要与 PHP 配置文件 `php.ini` 中的几个关键参数有关,如 `upload_max_filesize` 和 `post_max_size`。这些参数分别限制了单个文件的最大上传大小和整个 POST 请求的数据量。为了实现大文件的高效上传,可以通过文件分割与分片上传的方法来解决。本文将详细介绍这一实现方法,并提供相应的代码示例,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • 如何在服务器后台运行PHP脚本?
    如何在服务器后台运行PHP脚本? ... [详细]
  • 本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码,展示了如何利用爬虫技术获取微博内容和动态图片,为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者,本文具有较高的参考价值。 ... [详细]
  • Spring框架入门指南:专为新手打造的详细学习笔记
    Spring框架是Java Web开发中广泛应用的轻量级应用框架,以其卓越的功能和出色的性能赢得了广大开发者的青睐。本文为初学者提供了详尽的学习指南,涵盖基础概念、核心组件及实际应用案例,帮助新手快速掌握Spring框架的核心技术与实践技巧。 ... [详细]
  • 深入解析Spring Boot自动配置机制及其核心原理
    Spring Boot 的自动配置机制是其核心特性之一,旨在简化开发过程并提高效率。本文将深入探讨这一机制的工作原理,解释其如何通过智能化的类路径扫描和条件注解实现自动装配。通过对 Spring Boot 自动配置的详细解析,读者将能够更好地理解和应用这一强大功能,从而在实际项目中更加高效地利用 Spring Boot。 ... [详细]
  • Spring注解开发指南:@Resource与@Component详解 ... [详细]
  • 在2020年8月19日的深度分析中,我们探讨了HTML标签中同时存在`a`标签的`href`和`onclick`属性时的触发顺序问题。此外,还讨论了如何在一个自适应高度的父级`div`中,使两个子`div`中的一个固定高度为300px,另一个自动填充剩余空间的方法。最后,文章详细介绍了JavaScript异步加载的多种实现方式,包括但不限于`async`、`defer`属性以及动态脚本插入技术,为开发者提供了丰富的技术参考。 ... [详细]
  • SoIhaveanappthathasarightsidebarwhosevisibilityistoggledviaabutton.Inthatsidebar ... [详细]
author-avatar
豪哥仔137600
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有