定制上传按钮：
<div
style="position: relative;display: inline-block;height: 50px;min- 300px;overflow: hidden;">
<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1000;border: 1px dotted #9d9d9d;color: #9d9d9d;line-height: 50px;padding-left: 15px;">
<i class="fa fa-cloud-upload" aria-hidden="true"></i>
<span>点击上传文件</span>
</div>
<input name="customer_excel" type="file" id="excelFile"
style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1001;opacity: 0;filter:alpha(opacity=0);">
</div>
$(function () {
$('#excelFile').change(function (e) {
var fileName = e.currentTarget.files[0].name;
$(this).prev().find('span').text(fileName);
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div style="height: 100px; 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
<img style="height: 100%; 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
src="/static/imgs/default.png">
<input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;position: absolute;z-index: 102;" id="avatarImg"
name="avatar_img" type="file" class="img-file"/>
</div>
<div>点击图片更换(<a href="#">撤销</a>)</div>
<p>
<input type="text" placeholder="用户名">
</p>
<p>
<input type="text" placeholder="密码">
</p>
</form>
</div>
</body>
</html>
预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div style="height: 100px; 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
<img style="height: 100%; 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
src="/static/imgs/default.png">
<input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
name="avatar" type="file" class="img-file"/>
</div>
<div>点击图片更换(<a href="#">撤销</a>)</div>
<p>
<input type="text" placeholder="用户名">
</p>
<p>
<input type="text" placeholder="密码">
</p>
<input type="submit" value="提交">
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function () {
bindChangeAvatar1();
});
function bindChangeAvatar1() {
$('#avatarImg').change(function () {
var file_obj = $(this)[0].files[0];
var blob = window.URL.createObjectURL(file_obj);
document.getElementById('previewImg').src = blob;
$('#previewImg').load(function () {
window.URL.revokeObjectURL(blob);
})
})
}
</script>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div style="height: 100px; 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
<img style="height: 100%; 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
src="/static/imgs/default.png">
<input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
name="avatar" type="file" class="img-file"/>
</div>
<div>点击图片更换(<a href="#">撤销</a>)</div>
<p>
<input type="text" placeholder="用户名">
</p>
<p>
<input type="text" placeholder="密码">
</p>
<input type="submit" value="提交">
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function () {
bindChangeAvatar2();
});
function bindChangeAvatar2() {
$('#avatarImg').change(function () {
var file_obj = $(this)[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file_obj);
reader.onload = function (e) {
$('#previewImg')[0].src = this.result;
};
})
}
</script>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div style="height: 100px; 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
<img style="height: 100%; 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
src="/static/imgs/default.png">
<input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
name="avatar" type="file" class="img-file"/>
</div>
<div>点击图片更换(<a href="#">撤销</a>)</div>
<p>
<input type="text" placeholder="用户名">
</p>
<p>
<input type="text" placeholder="密码">
</p>
<input type="submit" value="提交">
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function () {
bindChangeAvatar3();
});
function bindChangeAvatar3() {
$('#avatarImg').change(function () {
var file_obj = $(this)[0].files[0];
var form = new FormData();
form.add('img_upload', file_obj);
$.ajax({
url: '',
data: form,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function (arg) {
// 给img标签设置src属性，预览
}
})
})
}
</script>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div style="height: 100px; 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
<iframe style="display: none;" id="upload_iframe" name="upload_iframe"></iframe>
<form method="POST" action="上传地址" enctype="multipart/form-data" target="upload_iframe">
<img style="height: 100%; 100%;border: 0;overflow: hidden;border-radius: 50%;" id="previewImg"
src="/static/imgs/default.png">
<input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 1;position: absolute;z-index: 102;" id="avatarImg"
name="avatar" type="file" class="img-file"/>
</form>
</div>
<div>点击图片更换(<a href="#">撤销</a>)</div>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<p>
<input type="text" placeholder="图片路径">
</p>
<p>
<input type="text" placeholder="用户名">
</p>
<p>
<input type="text" placeholder="密码">
</p>
<input type="submit" value="提交">
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function () {
bindChangeAvatar4();
});
function bindChangeAvatar4() {
$('#avatarImg').change(function () {
$(this).parent().submit();
$('#upload_iframe').load(function () {
var iframeContents = this.contentWindow.document.body.innerText;
iframeContents = JSON.parse(iframeContents);
if (iframeContents.status) {
$('#previewImg').attr('src', '/' + iframeContents.data);
}
})
})
}
</script>
</div>
</body>
</html>
参考兼容性：
- https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
- https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
- https://developer.mozilla.org/zh-CN/docs/Web/API/FormData