位置：首頁 > 計算機 > java語言

如何基於JavaScript實現本地圖片預覽

java語言1.13W

導語：如何基於JavaScript實現本地圖片預覽呢？下面是小編給大家提供的實現代碼，大家可以參考閲讀，更多詳情請關注應屆畢業生考試網。

<!DOCTYPE html>

<!--

<!DOCTYPE html>一定要放在第一行,除非上面都是空行

在HTML規範中,單獨存在的標籤是不需要使用/來自我關閉的,比如<br>,<input>,<hr>等等這樣的標籤都是符合語法的.

在XHTML規範中,單獨存在的標籤要按照XML的.語法規則進行自我關閉,上面三個標籤就應寫成<br />,<input />,<hr />

-->

<html>

<head>

<style>

input[type=radio] {

/* 按鈕與文字對齊 */

vertical-align:middle;

}

input[type=file] {

display: block;

}

#img {

width: 200px;

height: 200px;

border: 1px solid black;

margin-top: 10px;

}

</style>

</head>

<body>

<input type="radio" name="previewType" value="fileReader" onChange="onPreviewTypeChange()">fileReader

<input type="radio" name="previewType" value="createURL" onChange="onPreviewTypeChange()">createURL

<hr>

var previewTypes = lementsByName("previewType");

var imgFile = lementById("imgFile");

var img = lementById("img");

function getPreviewType() {

for(var i=0; i<th; i++) {

if(previewTypes[i]ked) {

return previewTypes[i]e;

}

function onPreviewTypeChange() {

imgChange(e);

}

function imgChange(type) {

= "";

var files = s;

(files);

if(!files || th === 0) {

return;

}

var file = files[0];

if(!type) {

type = getPreviewType();

if(!type) {

return;

}

switch(type) {

case "fileReader":

var fr = new FileReader();

ad = function(progressEvent) {

(progressEvent);

= lt;

}

AsDataURL(file);

break;

case "createURL":

ad = function() {

//釋放一個之前通過調用 teObjectURL() 創建的已經存在的 URL 對象。

keObjectURL();

}

= teObjectURL(file);

break;

}

</script>

</body>

</html>

糯米文學吧

如何基於JavaScript實現本地圖片預覽

Java Class文件是什麼

編寫更好的Java單元測試的7個技巧

Java多線程知識點

Java中嵌入式MySQL的使用方法介紹

相關文章