onChange, после ввода файла изменения в img src и изменение цвета изображения

onChange, после ввода файла изменения в img src и изменение цвета изображения

19.07.2014 10:57:00 Просмотров 21 Источник

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');
  }
}

JSFiddle

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/24837646/onchange-file-input-change-img-src-and-change-image-color#comment38564869_24837646
ваша проблема решена
https://stackoverflow.com/questions/24837646/onchange-file-input-change-img-src-and-change-image-color#comment38565217_24837646
@logan да. jsfiddle.net/stN8U/1 это решило мою проблему, спасибо.
https://stackoverflow.com/questions/24837646/onchange-file-input-change-img-src-and-change-image-color#comment38566201_24837646
если предоставленный ответ полезен, примите ответ, который подходит вам лучше.

Ответы - onChange, после ввода файла изменения в img src и изменение цвета изображения / onchange file input change img src and change image color

Bhushan Kawadkar

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');
    }
  });

});

демо jQuery

https://stackoverflow.com/questions/24837646/onchange-file-input-change-img-src-and-change-image-color/24837700#comment38564295_24837700
jsfiddle.net/M3kj6/1 и еще jsfiddle.net/stN8U/1 и то и другое хорошо работает для меня. Спасибо. а также любые предложения о том, как изменить цвет изображения только flash или photoshop является вариантом для этого или есть какой-либо другой вариант??
https://stackoverflow.com/questions/24837646/onchange-file-input-change-img-src-and-change-image-color/24837700#comment38564354_24837700
да, это будет работать, в конечном счете вы привязываете событие изменения к файлу ввода и вызова функции (которые делают остальную часть задачи). То же самое я упомянул в своем ответе, но поместил весь код в функцию bind, а не в отдельную функцию javascrpt.
Sankar Jay

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');
}
}
https://stackoverflow.com/questions/24837646/onchange-file-input-change-img-src-and-change-image-color/24872585#comment96483133_24872585
Этот ответ такой же , как и основной ответ , в основном украл его у поставщика решения для очков. Не круто ИМО.
Yacine

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);
Arif

26.06.2019 07:41:55

простое решение. Нет Jquery

<img id="output" src="" width="100" height="100">

<input name="photo" type="file" accept="image/*" onchange="document.getElementById('output').src = window.URL.createObjectURL(this.files[0])">

Amzad Khan

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])
    }
Закрыть X