2021-05-12 14:32:11
js如何顯示圖片
2019-12-12 05:27:05
js全名JavaScript一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於用戶端的指令碼語言，最早是在HTML（標準通用標示語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
在1995年時，由Netscape公司的Brendan Eich，在網景領航員瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。
為了取得技術優勢，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在瀏覽器上執行。為了統一規格，因為JavaScript相容於ECMA標準，因此也稱為ECMAScript。
1
第一步：實現思路。
實現方式還是比較簡單的，js的主要作用就是操作html元素。
1、原始js實現根據選擇圖片在img標籤的src屬性複製。
2、借助於jquery元件實現
3、素材如下所示。
2
第二步：基於原始的js實現。
具體實現程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="image"src=""/>
<br/>
<input type="file"onchange="selectImage(this);"/>
<br/>
<script>
var image = '';
function selectImage(file) {
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById('image').src = evt.target.result;
image = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
</script>
</body>
</html>
3
第三步：測試第一種實現方式。
1、開啟頁面
2、選擇需要顯示的圖片
3、檢視結果，測試成功。熊出沒的圖片顯示出來了。
4
第四步：程式碼實現。
借助於jquery實現具體程式碼如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script type="text/JavaScript">
//圖片顯示外掛
(function ($) {
$.imageFileVisible = function (options) {
// 預設選項
var defaults = {
//包裹圖片的元素
wrapSelector: null,
//<input type=file />元素
fileSelector: null,
width: '100%',
height: 'auto',
errorMessage: "不是圖片"
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
$(opts.fileSelector).on("change", function () {
var file = this.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function () {
var img = new Image();
img.src = reader.result;
$(img).width(opts.width);
$(img).height(opts.height);
$(opts.wrapSelector).append(img);
};
reader.readAsDataURL(file);
} else {
alert(opts.errorMessage);
}
});
};
})(jQuery);
$(document).ready(function () {
//圖片顯示外掛
$.imageFileVisible({ wrapSelector: "#image-wrap1",
fileSelector: "#file1",
width: 300,
height: 300
});
});
</script>
<div id="ImportHead">
<table border="0" class="frm" style="height: 35px; width: auto; padding-left: 5px;
padding-top: 1px;">
<tr style="width: 300px; height: 400px;">
<th>
選擇圖1：
</th>
<td>
<input type="file" id="file1">
<div id="image-wrap1" style="width: 300px; height: 300px; border: solid 1px lightGray">
</div>
</td>
</table>
</div>
</body>
</html>
5
第五步：測試第一種實現方式。
1、開啟頁面
2、選擇需要顯示的圖片
3、檢視結果，測試成功。憤怒的小鳥圖片顯示出來了。
相關文章