【js小案例】js实现图片回显

最新推荐文章于 2024-05-12 09:27:50 发布

evan_qb

最新推荐文章于 2024-05-12 09:27:50 发布

阅读量554

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Evan_QB/article/details/80278905

版权

前端专栏收录该内容

76 篇文章 1 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no,email=no,address=no"/>
    <title>图片回显</title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<form action="">
		<input type="file" name="picPath" id="picPath" οnchange="uploadFile()"/>
		<img id="newImg" width="100px" height="100px" style="display:none"/>
	</form>
</body>
<script type="text/javascript">
	function uploadFile(){
		var windowURL = window.URL || window.webkitURL;
		var picPath = document.getElementById("picPath");
		var loadImg = windowURL.createObjectURL(picPath.files[0]);
		var newImg = document.getElementById("newImg");
		newImg.setAttribute("src",loadImg);
		picPath.style.display = "none";
		newImg.style.display = "block";
		
	}
</script>
</html>