如何用JS显示图片呢?

如何用JS显示图片呢?,第1张

比如在一个div中显示图片

<div id='img'></div>

js:

var divObj = document.getElementById("img")

divObj.innerHTML = "<img src='1.jpg' />"

你这段代码放到body里边

<script>

document.write("<img src='1.jpg'/>")

</script>

​​​​​​

    1 页面HTML内容

    2 获取input[file]元素    

    3 对获取的file元素 *** 作,也就是 *** 作fileReader属性    

1:Blob

2:  File

3:  FileList

4:  FileReader

FileList :

这里,默认状态下选择文件 每次files属性上FileList对象里只有一个file文件。

file对象中包含了name 文件名size type 文件类型lastModified 最后修改时间;

FileReader:异步读取本地文件内容;包括File 和Blob ;

    创建FileReader对象读取file文件

关于fileReader的几个属性:

FileReader.error 只读一个 DOMException 代表在读取文件中出现的错误。 FileReader.readyState 只读一个数字表明的状态FileReader。这是以下之一:

FileReader.result 只读文件的内容。该属性仅在读取 *** 作完成后才有效,并且数据的格式取决于使用哪种方法来启动读取 *** 作。

fileReader的几个事件处理程序:

1 . FileReader.onbort:在读取 *** 作中止时触发。

2 . FileReader.onerror:在读取 *** 作遇到错误时触发。

3 . FileReader.onload:在读取 *** 作成功完成时触发。

4 . FileReader.onloadstart:在开始阅读时触发。

5 . FileReader.onloadend:无论是否成功 只要读取 *** 作完成都会触发。

6 . FileReader.onprogress:阅读Blob内容时触发。

FileReader的方法:

1 . FileReader.abort()中止读取 *** 作

2 . FileReader.readAsArrayBuffer()完成时result属性包含ArrayBuffer表示文件数据

3 . FileReader.readAsBinaryString()完成时result属性将包含来自文件的原始二进制数据作为字符串。

4 . FileReader.readAsDataURL()完成时result属性包含data:表示文本数据的URL;

5 . FileReader.readAsText()完成时result属性包含文本的内容作为文本字符串。

具体是要什么样呢

如果是打开新窗口显示图片

在新窗口加载的时候,调用javascript

调用一个图片控件,厨师属性这是为

display=none,隐藏在那。窗口加载的时候,设置属性为

display=block

思路就是这样,懒得去试验了


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/tougao/8031190.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-12
下一篇2023-04-12

发表评论

登录后才能评论

评论列表(0条)

    保存