onChange, после ввода файла изменения в img src и изменение цвета изображения
onChange событие не работает. Что я должен сделать, чтобы получить результат на той же странице. Я не хочу перенаправлять на любую другую страницу, чтобы загрузить изображение. Является ли эта проблема из-за opencart? Я не знаю, правильно ли писать так в cpanel. Я использую opencart и cpanel. Есть ли другой способ?
HTML
<input type='file' id="upload" onchange="readURL(this.value)" />
<img id="img" src="#" alt="your image" />
скрипт
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');
}
}
Ответы - onChange, после ввода файла изменения в img src и изменение цвета изображения / onchange file input change img src and change image color
19.07.2014 11:03:26
Вам нужно отправить thisобъект только вместо this.value во время вызова onChange, после
<input type='file' id="upload" onchange="readURL(this)" />
потому что вы используете inputпеременную, как thisв вашей функции, как в строке
var url = input.value;// reading value property of input element
EDIT-попробуйте использовать jQuery, как показано ниже --
удалить onchange из поля ввода :
<input type='file' id="upload" >
Связать onchange события на поле ввода :
$(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');
}
});
});
21.07.2014 10:55:15
Попробуйте с помощью этого кода, Вы получите предварительный просмотр изображения во время загрузки
<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');
}
}
03.04.2015 12:05:59
в вашем HTML: <input type="file" id="yourFile">
не забудьте сослаться на файл js или поместить следующий скрипт между <script></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);
22.07.2019 03:50:49
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])
}