You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
2.0 KiB
60 lines
2.0 KiB
{% extends 'layout.html' %}
|
|
|
|
|
|
{% block content %}
|
|
|
|
<div class="container">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h3 class="panel-title"> {{ title }} </h3>
|
|
</div>
|
|
<div class="panel-body">
|
|
<form method="post" enctype="multipart/form-data" novalidate>
|
|
|
|
<div style="height: 100px;width: 100px;padding: 2px;border: 1px solid #dddddd;position: relative;">
|
|
<img style="height: 100%;width: 100%;border: 0;overflow: hidden;"
|
|
id="previewImg"
|
|
src="/static/img/default.png">
|
|
<input style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;position: absolute;z-index: 102;"
|
|
id="avatarImg"
|
|
name="avatar" type="file" class="img-file"/>
|
|
</div>
|
|
|
|
|
|
{% csrf_token %}
|
|
|
|
{% for field in form %}
|
|
<div class="form-group">
|
|
<label>{{ field.label }}</label>
|
|
{{ field }}
|
|
<span style="color: red;">{{ field.errors.0 }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<button type="submit" class="btn btn-primary">提 交</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<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>
|
|
{% endblock %}
|