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.youkuaiyun.com/qq_27367825/article/details/78390146
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
