html上传图片后，在页面显示上传的图片

第一种方法：

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

html上传图片后，在页面显示上传的图片

猜你喜欢