<!DOCTYPE html>
<html>
<head>
<title>js上传图片--预览图片</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<input type="file" id="file" onChange="preview(this)"/>
<img src="" id="previewimg" width="50px" height="40px"/>
</form>
<script type="text/javascript">
function preview(obj){
var file = document.getElementById('file').value;//获取文件
var index = file.lastIndexOf('.'); //获取最后一位小数点
var extension = file.substr(index + 1);
var arr = ['jpeg','png','jpg','gif'];
if (isInArray(arr,extension)) {
var img = document.getElementById("previewimg");
img.src = window.URL.createObjectURL(obj.files[0]);
} else {
alert('请选择正确的格式');
return false;
}
}
/**
* 使用循环的方式判断一个元素是否存在于一个数组中
* @param {Object} arr 数组
* @param {Object} value 元素值
*/
function isInArray(arr,value){
for(var i = 0; i < arr.length; i++){
if(value === arr[i]){
return true;
}
}
return false;
}
</script>
</body>
</html>
js实现图片sh上传预览效果
猜你喜欢
转载自blog.csdn.net/wen_3370/article/details/79602531
今日推荐
周排行