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" />

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

JSFiddle http://jsfiddle.net/Junkie/stN8U/

您需要发送this仅对象而不是this.value调用 onchange 时

<input type='file' id="upload" onchange="readURL(this)" />

因为你正在使用input变量为this在你的函数中，就像在 line 中

var url = input.value;// reading value property of input element

工作演示 http://jsfiddle.net/stN8U/2/

EDIT- 尝试使用 jQuery，如下所示 -

从输入字段中删除 onchange ：

<input type='file' id="upload" >

Bind 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 演示 http://jsfiddle.net/stN8U/3/