Home > Article > Web Front-end > js upload image preview
js upload image preview
- 大家讲道理Original
- 2016-11-10 13:25:261195browse
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".file").change(function(){
var fileImg = $(".fileImg");
var explorer = navigator.userAgent;
var imgSrc = $(this)[0].value;
if (explorer.indexOf('MSIE') >= 0) {
if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
imgSrc = "";
fileImg.attr("src","/img/default.png");
return false;
}else{
fileImg.attr("src",imgSrc);
}
}else{
if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) {
imgSrc = "";
fileImg.attr("src","/img/default.png");
return false;
}else{
var file = $(this)[0].files[0];
var url = URL.createObjectURL(file);
fileImg.attr("src",url);
}
}
})
})
</script>
</head>
<body>
<form enctype="multipart/form-date" method="post">
<input type="file">
<input type="submit">
</form>
<img src="" alt="js upload image preview" >
</body>
</html>Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js+html achieves mask layer effectNext article：js+html achieves mask layer effect