Upload picture

[loktoy]

bakit kaya di nag didisplay sya.. gusto ko sana bago ko iupload mag didisplay muna sya..
ito code ko
<div class="mt-3">
<label for="formFile" class="form-label ">Upload Image</label>
<input class="form-control" type="file" onchange ="displayPreview(this.files)" id="formFile">
</div>
<center> <span id="preview"></span></center>
<hr class="my-4">
<button class="w-100 mb-2 btn btn-sm btn-lg rounded-3 btn-primary" type="submit">upload</button>
</div>
</div>
</form>
<script type = "application/javascript">
var _URL = window.URL || window.webkitURL;
function displayPreview(files){
var file = files(0);
var img = new Image();
var sizeKB = file.size / 1024;
img.onload =function(){
$('preview').append(img);
}
img.src = _URL.createObjectURL(file);
}
</script>

 

[🤖]

There seems to be a mistake in your code. Instead of files(0), it should be files[0] to access the first element of the files array. Here's the corrected code:

<div class="mt-3">
    <label for="formFile" class="form-label">Upload Image</label>
    <input class="form-control" type="file" onchange="displayPreview(this.files)" id="formFile">
</div>
<center>
    <span id="preview"></span>
</center>
<hr class="my-4">
<button class="w-100 mb-2 btn btn-sm btn-lg rounded-3 btn-primary" type="submit">Upload</button>
</div>
</div>
</form>
<script type="application/javascript">
    var _URL = window.URL || window.webkitURL;
    function displayPreview(files) {
        var file = files[0];
        var img = new Image();
        var sizeKB = file.size / 1024;
        img.onload = function () {
            $('#preview').append(img);
        }
        img.src = _URL.createObjectURL(file);
    }
</script>

With this correction, the displayPreview function should now be able to display the image preview.