标签：opacity func order ext tle obj ESS overflow tar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.avatar_con {
height: 100px;
width: 100px;
position: relative;
}
.avatar_con iframe {
display: none
}
.avatar_con img {
height: 100%;
width: 100%;
border: 0;
overflow: hidden;
max-height: 100px;
}
.avatar_con #previewImg {
border-radius: 50%;
border: 1px solid #dddddd;
padding: 3px;
height: 96px;
width: 96px;
}
.avatar_con #avatarImg {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
position: absolute;
z-index: 102;
}
.avatar-avatar_con .text {
position: absolute;
left: 0;
bottom: 0;
text-align: center;
}
</style>
<body>
<h1>jQuery Ajax上传文件</h1>
<div class="avatar_con">
<label for="avatar">
<img id="previewImg" src="/static/avatar/1.jpg">
<div class="text">点击图片更换</div>
</label>
<input id="avatarImg" name="avatar" type="file"/>
</div>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function () {
bindChangeAvatar();
});
// ajax上传文件
function bindChangeAvatar() {
$(‘#avatarImg‘).change(function () {
/*
// 头像预览 方法1:
// 获取用户选中的文件对象
var file_obj = $(this)[0].files[0];
// 获取文件对象的路径
var reader = new FileReader();
reader.readAsDataURL(file_obj);
// 修改img的src属性 ，src=文件对象的路径
reader.onload = function () {
$("#previewImg").attr("src", reader.result)
};
*/
var formdata=new FormData();
formdata.append("avatar",$("#avatarImg")[0].files[0]);
formdata.append("csrfmiddlewaretoken","{{ csrf_token }}"); //csrf
$.ajax({
url:"", //不填写就是当前 /upload/
type:"post",
contentType:false, //
processData:false, //
data:formdata,
success:function(arg){
arg = JSON.parse(arg);
if (arg.status) {
console.log(arg.data);
// 头像预览 方法2:
$(‘#previewImg‘).attr(‘src‘, ‘/‘ + arg.data);
}
}
})
})
}
</script>
</body>
</html>
标签：opacity func order ext tle obj ESS overflow tar
原文地址：https://www.cnblogs.com/bubu99/p/10317775.html
