下面添加一段蓝色代码解决该问题
<%@ 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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="css/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript">
$(function(){
$("a img").click(function(){
var src=$(this).attr("src");
$("#showphoto").attr({
src:src
});
});
});
//解决上传本地文件时，浏览器安全保护路径问题
//参考了文章 http://www.jb51.net/article/40864.htm#comments
var url;
if(files){
if (window.navigator.userAgent.indexOf("MSIE")>=1){
url = document.getElementById(files).value;
}
else if(window.navigator.userAgent.indexOf("Firefox")>=1){
url = window.URL.createObjectURL(document.getElementById(files).files.item(0));
}
else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(files).files.item(0));
}
return url;
};
};
function pre(files,photo){
var url=get(files);
alert(url);
alert(url);
//四种赋值img的src的方法
//一
$("#photo img").attr("src",url);
//二 当div中img有多个时，使用eq(0)选择第一个
//$("#photo img").eq(0).attr("src",url);
//三
//$("#photo").children("img").attr("src",url);
//四
//var imgPre = document.getElementById("imgPre");
//imgPre.src = url;
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4"><img alt="0.jpg" src="imgs/4.png" id="showphoto">2</div>
</div>
<div class="row">
<div class="col-md-4" ><a><img alt="4.jpg" src="imgs/4.png"></a></div>
<div class="col-md-4 col-md-offset-4"><a><img alt="5.jpg" src="imgs/5.png">3</a></div>
</div>
<div class="row">
<div class="col-md-4" id="pre"></div>
<div class="col-md-4" id="photo"><img id="imgPre" alt="show" src="" ></div>
<div class="col-md-4"><input id="files" type="file" value="选择" οnchange="pre(this.id,'photo');"></div>
</div>
</div>
</body>
</html>
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/512.html