下面添加一段藍色代碼解決該問題
<%@ 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>