js如何获取上传图片的名称

Dreamweaver CS5代码编纂器

Firefox浏览器

方式/步调

  1. 1

    新建一个html文件,定名为test.html,用于举例讲解js若何获取上传图片的名称。

    d31b0ef41bd5ad6e0ae1a1c68ecb39dbb6fd3c86.jpg
  2. 2

    在test.html文件内,利用form标签建立一个表单,代码如下:

    960a304e251f95ca68e1579ac6177f3e67095282.jpg
  3. 3

    在form表单内,建立一个type类型为file的选择图片按钮和一个type类型为submit的提交按钮。代码如下:

    730e0cf3d7ca7bcb48e20303b1096b63f624a805.jpg
  4. 4

    编写js代码,利用getElementById()方式经由过程id获得已选择的图片对象,代码如下:

    9e3df8dcd100baa10e8d80974810b912c8fc2e7d.jpg
  5. 5

    经由过程addEventListener()监听选择图片对象,被选择上传图片时,触发执行readFile函数,代码如下:

    0df431adcbef76093b3b59b321dda3cc7cd99eee.jpg
  6. 6

    在readFile函数内,经由过程files获得上传图片的信息,利用alert()方式将获得的图片名称以弹窗形式显示出来。

    503d269759ee3d6d650047e74c166d224e4adedc.jpg
  7. 7

    在浏览器打开test.html文件,点击“浏览”按钮选择图片,弹出图片名称。如下图所示:

    8326cffc1e178a8242ecb28cf903738da877e8cf.jpg
  • 发表于 2019-09-10 17:00
  • 阅读 ( 1013 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

0 篇文章

作家榜 »

  1. xiaonan123 189 文章
  2. 汤依妹儿 97 文章
  3. luogf229 46 文章
  4. jy02406749 45 文章
  5. 小凡 34 文章
  6. Daisy萌 32 文章
  7. 我的QQ3117863681 24 文章
  8. 华志健 23 文章

联系我们:uytrv@hotmail.com 问答工具