JavaScript实现文件上传demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>

<body>
    <form action="http://localhost:61998/file/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <br>
        <button type="submit">提交</button>
    </form>
</body>
<script>
    let input = document.querySelector("input")
    // 当文件选择后,出发
    input.onchange = evt => {
        // 获取选择的文件
        const file = evt.target.files[0]
        // 读取文件
        const readFile = new FileReader()
        // 当文件读取完成后执行
        readFile.onload = file => {
            previewImg(file.target.result)
        }
        // 读取文件
        readFile.readAsDataURL(file)
    }
    // 创建预览图片元素
    function previewImg(dataSrc) {
        const img = new Image()
        img.setAttribute('width', "100px")
        img.setAttribute('src', dataSrc)
        document.body.append(img)
    }
</script>

</html>

原文链接:https://www.cnblogs.com/letgofishing/p/17266068.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现文件上传demo - Python技术站

(0)
上一篇 2023年4月18日
下一篇 2023年4月18日

相关文章

  • js正则表达式之exec方法讲解

    下面是关于“js正则表达式之exec方法讲解”的完整攻略。 exec方法介绍 正则表达式是一个非常重要的知识点,使用正则表达式可以进行文本匹配和替换,exec() 是Regexp对象的一个方法,用于在字符串中执行正则表达式的搜索,并返回包含结果的数组。如果没有找到匹配,它将返回 null。 该方法的语法如下所示: regexp.exec(str) 其中 re…

    JavaScript 2023年6月10日
    00
  • 详解vue中router-link标签所必备了解的属性

    下面我来详细讲解“详解vue中router-link标签所必备了解的属性”。 什么是router-link标签 在Vue中,使用router-link标签可以实现页面的跳转。router-link标签是Vue Router提供的一个组件,它通过Vue Router中的路由规则来控制页面跳转。 router-link标签的必备属性 在使用router-link…

    JavaScript 2023年6月11日
    00
  • js 函数式编程学习笔记

    下面是学习 js 函数式编程的完整攻略: 1. 学习函数式编程基础 函数式编程是一种编程范式,需要掌握一些基础概念和语法,例如: 纯函数:不会修改外部状态,返回结果只依赖于输入参数 函数柯里化:把接受多个参数的函数变换成接受一个单一参数的函数 高阶函数:函数可以作为参数或返回值使用 可以通过阅读函数式编程相关的书籍或文章来学习这些基础知识。推荐的书籍有《Ja…

    JavaScript 2023年6月10日
    00
  • 用js+cookie记录滚动条位置

    下面我将为您详细介绍用JS+Cookie记录滚动条位置的完整攻略。 1. Cookie简介 Cookie 是一种在浏览器存储数据的小文件。Cookie 可以用于会话管理、个性化设置、购物车、广告跟踪等方面。 Cookie 是通过 JavaScript 中的 document.cookie 属性进行访问和修改,可以存储少量的数据,通常不超过 4 KB。每个 C…

    JavaScript 2023年6月11日
    00
  • 原生Aajax 和jQuery Ajax 写法个人总结

    原生Ajax与jQuery Ajax写法个人总结 简介 Ajax(Asynchronous JavaScript and XML)是指一种创建交互式、快速动态网页的技术,在不重新加载整个网页的情况下,能够异步地更新部分网页内容。本文将介绍原生Ajax与jQuery Ajax的写法及其异同点。 原生Ajax写法 XMLHttpRequest对象 原生Ajax基…

    JavaScript 2023年6月11日
    00
  • JS日历 推荐

    作为网站的作者,我非常乐意为大家介绍“JS日历 推荐”这个主题的完整攻略。在本文中,我将详细讲述该主题的使用方式、配置参数以及常见问题解决方案,并且提供两条示例说明,帮助大家更好地理解和掌握该主题的应用方法。 一、 使用方式 下载并引入日历组件库 <script src="https://cdn.jsdelivr.net/npm/pikada…

    JavaScript 2023年5月27日
    00
  • 为javascript添加String.Format方法

    为JavaScript添加String.Format方法,可以方便地对字符串进行格式化,提高字符串处理效率和可读性。下面是实现这一功能的完整攻略: 1. 使用原生JavaScript实现 1.1 方法一 可以使用JavaScript的prototype属性,为String对象添加名为format的方法。下面是具体的实现: String.prototype.f…

    JavaScript 2023年5月28日
    00
  • ES7之Async/await的使用详解

    ES7之Async/await的使用详解 什么是Async/await Async/await是ES7中引入的一组用于异步操作的新关键字。它们可以让我们更方便、更优雅地处理异步代码,避免了回调地狱(callback hell)的问题。 Async/await的基本用法 要使用Async/await,我们首先需要使用async关键字定义一个异步函数,函数中使用…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部