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日

相关文章

  • javascript中bind函数的作用实例介绍

    JavaScript中bind函数的作用实例介绍 在 JavaScript 中,可以使用 bind() 方法来将一个函数绑定到一个特定的上下文,从而返回一个新的函数,该函数中 this 关键字被绑定到指定的对象上。bind() 方法有很多用途,例如: 将方法绑定到对象上 创建有默认参数的函数 创建函数的柯里化版本 实现延迟执行函数 方法绑定示例 方法绑定是使…

    JavaScript 2023年6月11日
    00
  • 正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)

    正则表达式是一种用来描述、匹配一定模式文本的一种语法。在正则表达式中,有许多特殊符号用来表示常见的字符集、重复次数等,下面我们就来详细讲解一下正则表达式中的特殊符号以及几种常用的正则表达式方法。 正则表达式中的特殊符号 “^”:表示匹配字符串的开头。 “$”:表示匹配字符串的结尾。 “.”:表示匹配任意单个字符。 “*”:表示匹配前一个字符出现0次或多次。 …

    JavaScript 2023年6月10日
    00
  • js同源策略详解

    JS同源策略详解:什么是同源? 在网站开发中,我们常常会遇到 JS 同源策略,那么什么是同源?为什么同源策略这么重要?这篇文章将为你一一解答。 同源(Same-origin)是由同一个协议(protocol)、主机名(host)和端口号(port)组成,若三者相同,则是同源。例如: https://www.example.com 和 https://www.…

    JavaScript 2023年6月11日
    00
  • 带你彻底搞懂JavaScript的事件流

    带你彻底搞懂JavaScript的事件流 JavaScript的事件流是指浏览器中各个元素接收事件的顺序。该过程包含了三个阶段:捕获阶段、目标阶段和冒泡阶段。在理解了JavaScript的事件流后,可以更加深入地理解JavaScript的DOM操作和事件处理。 捕获阶段 在捕获阶段,事件从文档的根节点向下传递,直到达到事件的目标元素。在这个过程中,任何一个被…

    JavaScript 2023年5月27日
    00
  • javascript文件中引用依赖的js文件的方法

    在JavaScript文件中引用依赖的JS文件的方法有以下几种: 1. 直接引用 在HTML页面中,如果一个JS文件依赖于另一个JS文件,可以直接在HTML中用<script>标签引入需要的JS文件。例如: <!DOCTYPE html> <html> <head> <meta charset=&quot…

    JavaScript 2023年5月27日
    00
  • 前端加密cryptojs与JSEncrypt使实例详解

    前端加密 cryptojs 与 JSEncrypt 的使用攻略 什么是前端加密 前端加密,指的是在前端代码中使用加密算法对用户输入的敏感信息进行加密,从而保证信息在传输过程中不会被轻易地窃取。前端加密通常采用一些常见的加密算法,如 AES、RSA 等。 加密库 前端加密需要使用到一些加密库,比如 cryptojs、JSEncrypt。 cryptojs:提供…

    JavaScript 2023年5月19日
    00
  • FireFox JavaScript全局Event对象

    FireFox JavaScript全局Event对象 概述 在 FireFox JavaScript 中,Event 对象是一个全局的对象,它代表着一个事件,包含了事件的相关信息,如事件类型,目标元素等。我们可以使用 Event 对象来获取事件信息。 使用方法 获取事件类型 在事件处理函数中,我们可以使用 event.type 属性来获取事件的类型,例如:…

    JavaScript 2023年6月10日
    00
  • js报$ is not a function 的问题的解决方法

    问题描述: 当你在使用 jQuery 时,可能会遇到类似于” $ is not a function ” 的报错信息,这意味着代码尝试调用一个名为 $ 的函数,但是这个函数并未定义或者没有被正确加载。 解决方法: 引入 jQuery 库 请确保你已经在 HTML 文件中引入了 jQuery 库,可以通过以下方式引入: <script src=&quot…

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