ön izlemeli upload entegresi nasıl yapılır yardım

Codex' Alıntı:

html Kodu

Kod:

<form>
   <input type="file" id="imgup"><br>
   <img id="preview" src="#" style="width:100px;height:100px;" alt="">
</form>

Css  kodu

Kod:

#preview {display: none;}
.display {display: block !important;}

Javascript Kodu

Kod:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        $( "#preview" ).addClass( "display" );
        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result);
        }
         
        reader.readAsDataURL(input.files[0]);
    }
}
 
$("#imgup").change(function(){
    readURL(this);
});

Genişletmek için tıkla ...

Codex' Alıntı:

html Kodu

Kod:

<form>
   <input type="file" id="imgup"><br>
   <img id="preview" src="#" style="width:100px;height:100px;" alt="">
</form>

Css  kodu

Kod:

#preview {display: none;}
.display {display: block !important;}

Javascript Kodu

Kod:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        $( "#preview" ).addClass( "display" );
        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result);
        }
         
        reader.readAsDataURL(input.files[0]);
    }
}
 
$("#imgup").change(function(){
    readURL(this);
});

Genişletmek için tıkla ...