通過js操作上傳圖片，直接在頁面顯示
1.按照常規的邏輯：
我們通過ajax，或者form表單將檔案提交到後臺，將檔案儲存在某個臨時的目錄下，然後拿到這個儲存路徑，在前臺頁面賦值個<img>的src。
今天我們不走後臺邏輯，即點選上傳後，即可就在頁面進行顯示，ok，let's go!
2.程式碼如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
//var file =document.getElementById("myfile");
var file=$("#myfile").get(0);
var imgUrl =window.URL.createObjectURL(file.files[0]);
$("#pic_show").html("<img src="+imgUrl+" style=height:200px;width:200px;>");
});
});
</script>
</head>
<body>
上傳圖片:<input type="file" id="myfile" name="myimgfile"> <input type="button" id="btn" value="提交">
顯示上傳的圖片:<div style="width:300px;height:200px;" id="pic_show">
<img src=""/>
</div>
</body>
</html>
3.效果圖如下：
說明：
1.alert($("#myfile"))得到的是[object Object]
2、alert(document.getElementById("myfile"))得到的是[object HTMLDivElement]
3、alert($("#myfile")[0])或者alert($("#myfile").get(0))得到的是[object HTMLDivElement]
document.getElementById()返回的是DOM物件，而$()返回的是jQuery物件
參考：https://blog.csdn.net/qq_27367825/article/details/78390146