<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片预览</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>
<img class="img" width="100" height="100" id="previewimg">
</p>
<input class="select" type="file" id="picfile">
<script>
$('.select').change(function(e) {
var _URL = window.URL || window.webkitURL;
$("#previewimg").attr("src", _URL.createObjectURL(this.files[0]))
})
</script>
</body>
</html>
opacity: 0;multiple="multiple" 属性可以让input一次选择多个文件
注册change监听或定义onChange方法可以在选择完图片后回调，回调中使用files数组属性来获取选择的文件，如果是选择单文件，files[0]表示选择的图片
jquery回调中，this会自动指向当前操作的元素，例子中的this和getElementById("picfile")相对，如果要使用jquery方法，可以用$(this)
oninput事件在元素值发生变化时立即触发， onchange在元素失去焦点时触发，如果是输入文字，oninput在输入过程中一直回调（输入或删除一个文字就会调用一次），onchange在输入完成，点击其他地方调用。
createObjectURL把file对象转为url让img标签显示
原文：https://www.cnblogs.com/cowboybusy/p/11454428.html