<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../js/plugins/jquery-3.5.0.min.js"></script>
<title>图片上传2</title>
<style type="text/css">
div {
width: 12.5rem;
height: 12.5rem;
background-color: #FF7F50;
}
img {
width: 10.5rem;
height: 10.5rem;
}
</style>
</head>
<body>
<div>
<img src="../imgs/evaluate/addimg.png" onclick="selectFile()" />
<input type="file" id="android" onchange="uploadImg(this)" style=" display: none;"/>
</div>
<div>
<img src="" id="show" />
</div>
<script type="text/javascript">
//触发Input按钮
function selectFile() {
$("#android").trigger("click");
}
//选择文件事件
function uploadImg(e) {
var files = e.files;
console.log(files[0]);
if (files.length == 0) {
return;
}
var form = new FormData();
// 可以增加表单数据
form.append("Filedata", files[0]); // 文件对象
var file = files[0];
var src = window.URL.createObjectURL(files[0]); //转成可以在本地预览的格式
var showImg = document.getElementById('show');
showImg.src = src;
$.ajax({
url: 'http://www.baidu.com', //后台上图接口
type: "POST",
data: form,
dataType: 'json',
processData: false, //tell jQuery not to process the data
contentType: false, //tell jQuery not to set contentType
success: function(res) {
if (res.status == 1) {
$("#headImg").prop("src", res.path);
} else {}
}
});
}
</script>
</body>
</html>
html5图片上传预览
最新推荐文章于 2021-06-09 18:12:36 发布