Есть ли способ установить файл изображения в поле ввода, используя jquery? - PullRequest
Новая
       37

Есть ли способ установить файл изображения в поле ввода, используя jquery?

0 голосов
/ 21 июня 2020

Я могу сжать изображение, но не могу загрузить сжатое изображение через ajax. мое изображение предварительного просмотра сжато, но как отправить его через ajax почтовый запрос.

Я делаю поле ввода в форме и хочу выбрать сжатие изображения в это поле ввода. так что сжатое изображение можно загрузить через него. Но я не знаю, как это сделать? Я искал много в течение 3 дней, но не нашел никакой помощи.

Или , если есть другие способы загрузить сжатое изображение, сообщите.

HTML

{{ form.image|as_crispy_field }} //form imagefield has id=file  
<form action="home_page/mainpost/post/" id="mainpost-form"  enctype="multipart/form-data" class="shadow-lg p-3 mb-5 bg-white rounded" method="POST">
  {% csrf_token %}
 
  <input id="img-hidden" name="image" accept="image/*" type="file"  style="display:none"> 
  {{ form.info_post|as_crispy_field }}
  Preview Image - <br>
  <div class="hidden-img-div">
    <img id="original-Img"/>
  </div>
      <br>
  <input class="btn btn-danger" type="submit" value='Post'>
</form>

Jquery

<script>
  document.getElementById("file").addEventListener("change", function (event) {
    compress(event);
  });
  function compress(e){
    const width = 300;
    const fileName = e.target.files[0].name;
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = event => {
        const img = new Image();
        img.src = event.target.result;
        img.onload = () => {
                const elem = document.createElement('canvas');
                const scaleFactor = width / img.width;
                elem.width = width;
                elem.height = img.height * scaleFactor;
                const ctx = elem.getContext('2d');
                // img.width and img.height will contain the original dimensions
                ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);
                ctx.canvas.toBlob((blob) => {
                    const file = new File([blob], fileName,{
                        type: 'image/jpeg',
                        lastModified: Date.now()
                    });
                }, 'image/jpeg', 0.8);
              document.getElementById("original-Img").src = elem.toDataURL();
            },
            reader.onerror = error => console.log(error);
    }
  }    
$("mainpost-form").on("submit",function(e){
  e.preventDefault
  $.ajax(
    { 
      type:"POST", 
      url: "home_page/mainpost/post/", 
      data:{ csrfmiddlewaretoken: "{{ csrf_token }}"},
      dataType: 'json', 
    })
    .done(function(response){
    console.log(response)
    });
});
  </script>

Пожалуйста, помогите спасибо

...