圖片放大

時間 2019-11-21

標籤圖片放大简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap 實例 - 模態框（Modal）插件</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 ">
<label>圖片:</label>
<div>
<input type="file" id="files" onchange="getPhoto(this)"/>
<img src="" id="imgs" onclick="imgZoomIn(this.src);" width="50" height="50" />
</div>

<div class="modal fade text-center" id="imgZoomInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="display: inline-block; width: auto;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
</div>
<div class="modal-body">
<img src="" id="pigImg" />
</div>
</div>

</div>

</div>
</div>
</div>
</body>
<script type="text/javascript">
//點擊查看原圖
function imgZoomIn(src){
$("#pigImg").attr('src',src);
$("#imgZoomInModal").modal("show");
}
function getPhoto(node) {
var imgURL = "";
try{
var file = null;
if(node.files && node.files[0] ){
file = node.files[0];
}else if(node.files && node.files.item(0)) {
file = node.files.item(0);
}
//Firefox 因安全性問題已沒法直接經過input[file].value 獲取完整的文件路徑
try{
imgURL = file.getAsDataURL();
}catch(e){
imgRUL = window.URL.createObjectURL(file);
}
}catch(e){
if (node.files && node.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
imgURL = e.target.result;
};
reader.readAsDataURL(node.files[0]);
}
}
$("#imgs").attr('src',imgRUL);javascript

}
</script>
</html>css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。