onchange event is not working. What am I supposed to do to get result on same page. I dont want to redirect to any other page to upload image. Is this issue is because of opencart? I dont know if it is correct to write like this in cpanel. I am using opencart and cpanel. Is there any other way?
HTML
<input type='file' id="upload" onchange="readURL(this.value)" />
<img id="img" src="#" alt="your image" />
script
function readURL(input) {
var url = input.value;
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
else{
$('#img').attr('src', '/assets/no_preview.png');
}
}
This question is related to
javascript
jquery
html
opencart
cpanel
Below solution tested and its working, hope it will support in your project.
HTML code:
<input type="file" name="asgnmnt_file" id="asgnmnt_file" class="span8"
style="display:none;" onchange="fileSelected(this)">
<br><br>
<img id="asgnmnt_file_img" src="uploads/assignments/abc.jpg" width="150" height="150"
onclick="passFileUrl()" style="cursor:pointer;">
JavaScript code:
function passFileUrl(){
document.getElementById('asgnmnt_file').click();
}
function fileSelected(inputData){
document.getElementById('asgnmnt_file_img').src = window.URL.createObjectURL(inputData.files[0])
}
Try with this code, you will get the image preview while uploading
<input type='file' id="upload" onChange="readURL(this);"/>
<img id="img" src="#" alt="your image" />
function readURL(input){
var ext = input.files[0]['name'].substring(input.files[0]['name'].lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg"))
var reader = new FileReader();
reader.onload = function (e) {
$('#img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}else{
$('#img').attr('src', '/assets/no_preview.png');
}
}
You need to send this
object only instead of this.value
while calling onchange
<input type='file' id="upload" onchange="readURL(this)" />
because you are using input
variable as this
in your function, like at line
var url = input.value;// reading value property of input element
EDIT - Try using jQuery like below --
remove onchange from input field :
<input type='file' id="upload" >
Bind onchange
event to input field :
$(function(){
$('#upload').change(function(){
var input = this;
var url = $(this).val();
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg"))
{
var reader = new FileReader();
reader.onload = function (e) {
$('#img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
else
{
$('#img').attr('src', '/assets/no_preview.png');
}
});
});
in your HTML : <input type="file" id="yourFile">
don't forget to reference your js file or put the following script between <script></script>
in your script :
var fileToRead = document.getElementById("yourFile");
fileToRead.addEventListener("change", function(event) {
var files = fileToRead.files;
if (files.length) {
console.log("Filename: " + files[0].name);
console.log("Type: " + files[0].type);
console.log("Size: " + files[0].size + " bytes");
}
}, false);
Simple Solution. No Jquery
<img id="output" src="" width="100" height="100">_x000D_
_x000D_
<input name="photo" type="file" accept="image/*" onchange="document.getElementById('output').src = window.URL.createObjectURL(this.files[0])">
_x000D_
Source: Stackoverflow.com