html/javascript实现简单的上传

这篇具有很好参考价值的文章主要介绍了html/javascript实现简单的上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、 上传用到的按钮类型是type = file

二、 为了美化上传按钮,我们通常会自定义按钮,将默认的上传隐藏掉。

fileInputs.click() 触发上传按钮点击

三、 new FileReader()

读取文件内容方法:
readAsText() 读取文本文件,(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件,返回二进制字符串
readAsDataURL(): 方法可以将读取到的文件编码成DataURL ,可以将资料(例如图片、excel文件)内嵌在网页之中,不用放到外部文件
abort: 中断读取

文件的状态的获取:(根据自身情况使用)

onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发 (这里我就简单的用了onload
onloadend:文件读取完毕之后,不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发

为了更直观的看到区别,我为大家截取了reader上传前后的数据。(如下图)

reader对象上传前的数据:

html/javascript实现简单的上传

上传后通过readAsDataURL处理后的数据:

html/javascript实现简单的上传四、 file文件

const fileInputs = document.querySelector('.fileDoms')

console.log("file文件",fileInputs.files)

html/javascript实现简单的上传

五、完整的代码展示

<!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>
    <div class="upload">
        <img src="" alt="" style="width: 200px;height:200px;background:red;">
        <button>点击上传</button>
        <input type="file" style="display:none" class="fileDoms" onchange="changeFile()"/>
    </div>
</body>
<script>
    let btn  = document.querySelector(".upload button")
    let img = document.querySelector(".upload img")
    const fileInputs = document.querySelector('.fileDoms')
    btn.onclick = btnclick
    function btnclick(){
        fileInputs.click()
    }
    function changeFile(){
        console.log("上传")
        let reader = new FileReader();
        reader.readAsDataURL(fileInputs.files[0]);
        reader.onload = function(a){
            img.src = a.target.result; //等同于reader.result
            console.log(a,reader,reader.result);  
        }
    }
    </script>
</html>

html/javascript实现简单的上传html/javascript实现简单的上传文章来源地址https://www.toymoban.com/news/detail-416712.html

到了这里,关于html/javascript实现简单的上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 直接在html中引入Vue.js的cdn来实现一个简单的上传图片组件

    当使用 Vue.js 的 CDN 来实现一个简单的上传图片组件时,你可以利用 Vue 的数据绑定和事件处理能力,结合 HTML 和 CSS,轻松地创建一个交互式的图片上传界面。以下是一个示例: index.html TANKING https://afdian.net/item/ffa3292a337c11ee9a8c5254001e7c00

    2024年02月13日
    浏览(44)
  • 【简单的留言墙】HTML+CSS+JavaScript

                                             1.首先我们用HTML的一些标签,初步构造区域 样式。                                                                                2.上面操作已经初步完成布局,接下来在style标签中书写CSS代码,利用各种选择器设置。

    2024年02月07日
    浏览(46)
  • 简单的倒计时(html + css + javaScript)

    这个页面包含一个输入日期的输入框、一个“开始倒计时”的按钮以及一个显示倒计时的元素。当用户点击按钮时,会通过JavaScript获取输入的日期,并开始一个定时器,每秒更新倒计时并随机改变颜色。当倒计时结束时,定时器会被清除,倒计时元素将显示\\\"倒计时已结束\\\",

    2024年02月03日
    浏览(48)
  • 零基础学前端(二)用简单案例去理解 HTML 、CSS 、JavaScript 概念

    该篇适用于从零基础学习前端的小白 初学者不懂代码得含义也要坚持模仿逐行敲代码,以身体感悟带动头脑去理解新知识 HTML,CSS,JavaScript 都是单独的语言;他们构成前端技术基础; (1)HTML:负责网页的架构; (2)CSS:负责网页的样式,美化; (3)JavaScript(JS):负责

    2024年02月08日
    浏览(54)
  • pyqt5使用Designer实现按钮上传图片

    1、ui界面 2、ui转py代码 其中 uploadimg.py 代码如下: 3、upload_main.py主函数代码 upload_main.py 代码如下: 4、效果图

    2024年02月04日
    浏览(63)
  • 简单个人静态HTML网页设计作品 基于HTML+CSS+JavaScript仿小米手机网站 html静态在线购物商城网页制作

    常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目

    2024年02月09日
    浏览(69)
  • html实现一个一闪一闪的按钮,CSS实现一个一闪一闪的按钮,Css闪烁点标

    动态 静态 全部例子 底部多加了几个过渡按钮

    2024年02月04日
    浏览(42)
  • HTML JS实现点击按钮下载文件功能例子(C知道版)

            其实这篇应该算是一篇“水”文章,为什么要这么“水”呢,除了最近南方的气候闷热难耐需要降温之外,另一个主要原因,这里面所写的代码均是由CSDN的AI文本大模型\\\"C知道\\\"完成,我在这里只是简单记录一下,也方便其他有需求的同学借鉴一下,少绕一些弯路(有

    2024年02月15日
    浏览(41)
  • django bootstrap html实现左右布局,带折叠按钮,左侧可折叠隐藏

         在django项目中,需要使用bootstrap 实现一个左右分布的布局,左侧区域可以折叠隐藏起来,使得右侧的显示区域变大。(为了区分区域,左右加了配色,不好看的修改颜色即可)  点击折叠按钮,左侧区域隐藏,右侧区域铺满:          1、使用col-md属性,让左右两个区

    2024年02月14日
    浏览(57)
  • 用css实现简单的点击按钮动态效果

    效果图: 截图效果不是很好,但是大概看的出来效果。 实现: html: css:

    2024年02月06日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包