onchange文件输入改变img src并改变图像颜色

Question

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

Answer 1

简单的解决方案。没有 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])">

Answer 2

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

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

因为你在函数中使用input变量this,就像在行一样

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

工作演示

编辑 - 尝试使用如下的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演示

Answer 3

在您的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);