0

I have a form with inputs type file, if the button has been clicked, the image should start uploading and a progress bar showing the state, now I want to display a thumbnail of this image, there is a PHP (ControllerImage) and a method (myImagebut) checking either the file is a valid image or not, my idea is if that method returns a true variable that will allow displaying thumbnail image on the index.php otherwise don't show any thumbnail.

This is my form :

<div>
    <input type='file' name='img1' id='img1' onchange="uploadFile()">

    <progress id="progressBar" value="0" max="100" style="width:100%; height:15px;"></progress>
</div>
<tt id="status"></tt>
<br />


//index.php

function uploadFile(){
    cat = 5;
    var2= par1+'_'+par2;

    var file = _("img1").files[0];
    var e = document.getElementById("img1");
    var formdata = new FormData();
    formdata.append("img1", file);

    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", '/ControllerImage/myImage/img1/'+var2+'/'+cat+'/'+1+'/');
    ajax.send(formdata);
    formdata.delete("img1");
    formdata = '';
}

function progressHandler(event){
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
}

function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
    $("#progressBar").css({ 'background': 'Orange' });
}

function errorHandler(event){
    _("status").innerHTML = "upload failed";
}

function abortHandler(event){
    _("status").innerHTML = "upload interrumpted";
}
Rakesh Gupta
  • 3,507
  • 3
  • 18
  • 24
salmandiuran25
  • 57
  • 7
  • _"now I want to..."_ - then do it! Or is there any specific problem you didn't mention? – Jeff Mar 30 '18 at 14:09
  • 1
    Possible duplicate of [How to generate a thumbnail image after adding an image inside an input type="file" in a form and submitting them both on the same form](https://stackoverflow.com/questions/16500848/how-to-generate-a-thumbnail-image-after-adding-an-image-inside-an-input-type-fi) – stackoverfloweth Mar 30 '18 at 14:10
  • 1
    place an img tag in html file and On your ajax success update the img src to the uploaded image url. – Nithin John Mar 30 '18 at 14:11
  • This jsfiddle by steinbring might help you https://jsfiddle.net/steinbring/vftue1y8/ – Rakesh Gupta Mar 30 '18 at 16:38

0 Answers0