JavaScript使用readAsDataUrl方法预览图片
作者：liuhenghui5201 时间：2024-05-02 17:28:41
本文实例为大家分享了readAsDataUrl方法预览图片的具体代码，供大家参考，具体内容如下
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function filePrevImg(files){
//检测浏览器是否支持FileReader对象
if(typeof FileReader == "undefined"){
alert("您的浏览器不支持FileReader对象！");
}
var strHtml = "";
for(var intI=0;intI<files.length;intI++){
var tmpFile = files[intI];
var reader = new FileReader();//每循环一次都要重新new一个FileReader实例
reader.readAsDataURL(tmpFile);
reader.onload=function(e){
alert(e.target.result);
strHtml += "<img src='"+e.target.result+"' alt=''/>";
$$("prevUpload").innerHTML = "<li>"+strHtml+"</li>";
};
}
}
</script>
</head>
<body>
<fieldset>
<legend>使用readAsDataUrl()方法预览图片</legend>
<input type="file" name="fileUpload" id="fileUpload" onchange="filePrevImg(this.files);" multiple="true" />
<ul id="prevUpload"></ul>
</fieldset>
</body>
</html>
标签：readAsDataUrl,预览图片
0
投稿猜你喜欢
一文理解Python命名机制
2021-11-22 08:04:04
Python中列表与元组的乘法操作示例
2021-05-09 17:11:25
Python合并多个装饰器小技巧
2022-05-31 04:51:45
mysql与mssql的md5加密语句
2024-01-20 07:33:22
IE中伪类:hover的使用及BUG
2007-05-11 17:04:00
Python+Sklearn实现异常检测
2022-09-06 14:28:47
在MySQL中为何不建议使用utf8
2024-01-27 07:07:58
Mysql写入数据十几秒后被自动删除了如何解决
2024-01-27 05:24:15
go实现脚本解释器gscript
2023-10-12 00:49:39
放弃 Python 转向 Go语言有人给出了 9 大理由
2021-04-14 20:28:49
jupyter notebook中美观显示矩阵实例
2023-06-06 18:13:35
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2024-01-18 13:21:33
oracle中to_date详细用法示例(oracle日期格式转换)
2024-01-19 05:31:33
MySQL中or语句用法示例
2024-01-17 17:21:46
Python数学建模PuLP库线性规划入门示例详解
2023-06-13 13:06:20
python实现进程间通信简单实例
2023-11-23 08:29:37
python实现棋盘覆盖问题及可视化
2021-04-17 02:10:29
linux系统使用python监控apache服务器进程脚本分享
2021-10-15 00:15:41
Vue elementUI 自定义表单模板组件功能实现
2023-07-02 16:37:46
详解pytorch tensor和ndarray转换相关总结
2023-08-18 20:03:51
