js实现图片上传预览
2024-08-24 07:05:36
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#preview, .img, img
{
width:200px;
height:200px;
}
#preview
{
border:1px solid #;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
function preview(file)
{
var prevDiv = document.getElementById('preview');
if (file.files && file.files[])
{
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img' +' style='+'"width: 100px;height: 100px"'+' src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[]);
}
else
{
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
</body>
</html>
最新文章
- 2016年中国微信小程序专题研究报告
- 多种方法实现Loading(加载)动画效果
- shell 统计某个文件的行数命令
- 译:C#面向对象的基本概念 (Basic C# OOP Concept) 第三部分(多态,抽象类,虚方法,密封类,静态类,接口)
- python中模块sys与os的一些常用方法
- 修复jquery.treeview的增加子节点的方法的bug
- Java IO流学习总结(转)
- 蓝桥杯D1
- 366. Find Leaves of Binary Tree C#
- Andorid自动读取短信验证码
- PAT (Basic Level) Practise (中文) 1016. 部分A+B (15)
- js 原型 对象篇
- Food Delivery ZOJ - 3469(区间dp)
- MySQL基础配置之mysql的默认字符编码的设置(my.ini设置字符编码) - 转载
- canvas资料
- Kubelet bootstrap 流程
- rows的参数
- python中的%s%是什么意思
- [android开发教程] 一个神奇的Demo 帮你掌握所有android控件
- .net大型平台通过Nginx做负载均衡(Web层、中间服务层、DB层)