第一种方法：
1.前端代码
<form class="container" enctype="multipart/form-data" method="post" id='formBox' name="form">
<input type="file" id="chooseImage" name="file">
<!-- 保存用户自定义的背景图片 -->
<img id="cropedBigImg" value='custom' alt="lorem ipsum dolor sit" data-address='' title="自定义背景"/>
</form>
2.js
$('#chooseImage').on('change',function(){
var filePath = $(this).val(), //获取到input的value，里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
// 检查是否是图片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
error_prompt_alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}
$('#cropedBigImg').attr('src',src);
});
转自https://blog.csdn.net/tangxiujiang/article/details/78693890
第二种方法：
<!DOCTYPE html>
<html>
<head>
<title>html5上传后立即显示</title>
<script type="text/javascript">
function ProcessFile(e) {
var file = document.getElementById('file').files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (event) {
var txt = event.target.result;
var img = document.createElement("img");
img.src = txt;//将图片base64字符串赋值给img的src
// console.log(txt);
document.getElementById("result").appendChild(img);
};
}
reader.readAsDataURL(file);
}
function contentLoaded() {
document.getElementById('file').addEventListener('change',
ProcessFile, false);
}
window.addEventListener("DOMContentLoaded", contentLoaded, false);
</script>
</head>
<body>
请选取一个图像文件: <input type="file" id="file" name="file"/>
<div id="result"></div>
<div><img src="1.jpg"></div>
</body>
</html>
转自：https://blog.csdn.net/milijiangjun/article/details/79723013
