change_photo.html

{% extends 'workshopz/in/base.html' %}
{% load markup thumbnail crispy_forms_tags %}

{% block extrahead %}
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
</script>
{% endblock extrahead %}

{% block jquery %}
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
{% endblock jquery %}


{% block content %}
<h2>{{ workshop }}</h2>

<h3>Текущая фотка</h3>
{% thumbnail workshop.banner "800x600" crop="center" as im %}
<img src="{{ im.url }}" alt="{{ workshop.slogan }}"/>
{% endthumbnail %}

<h3>Загрузить новую фотку</h3>
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">{% csrf_token %}
  <fieldset>
    <div id="non-field-errors">{{ form.non_field_errors }}</div>
    <div class="span4">

<div id="div_id_photo" class="control-group">
    <label for="id_photo" class="control-label requiredField">Файл на замену<span class="asteriskField">*</span></label>
    <div class="controls"><input id="id_photo" type="file" class="clearablefileinput" name="photo" onchange="readURL(this);"/> </div></div>

<span id="previewPane">
<img id="img_prev" src="#" alt="миниатюрка картинки" />
<span id="x">[X]</span>

      <div class="controls">
      <input type="submit" class="btn btn-large btn-long" value="заменить"/>
      </div>
    </div>
    <div class="span6 second-info-column"></div>
  </fieldset>
</form>

{% endblock content %}