Javascript 一旦更改文件输入，更改img src并更改图像颜色

onchange事件不起作用。我应该怎么做才能在同一页上得到结果。我不想重定向到任何其他页面上传图像。这个问题是因为opencart吗？我不知道用cpanel这样写是否正确。我正在使用opencart和cpanel。还有别的办法吗

HTML

 <input type='file' id="upload" onchange="readURL(this.value)" />
    <img id="img" src="#" alt="your image" />

---

调用onchange时，只需发送

此

对象，而不是

此.value

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

编辑-尝试使用jQuery，如下所示--

从输入字段中删除onchange：

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

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

});

---

尝试使用此代码，您将在上载时获得图像预览

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

函数readURL（输入）{
var ext=input.files[0]['name'].substring（input.files[0]['name'].lastIndexOf（'.'）+1.toLowerCase（）；
如果（input.files&&input.files[0]&&（ext==“gif”| | ext==“png”| | ext==“jpeg”| | ext==“jpg”））
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#img'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}否则{
$（'#img'）.attr（'src'，'/assets/no#u preview.png'）；
}
}
在HTML中：

不要忘记引用js文件或将以下脚本置于

在脚本中：

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

简单的解决方案。没有Jquery



下面是经过测试的解决方案及其工作原理，希望它能在您的项目中提供支持。
HTML代码：



JavaScript代码：
函数passFileUrl（）{
document.getElementById（'asgnmnt_file'）。单击（）；
}
选择的函数文件（inputData）{
document.getElementById（'asgnmnt_file_img'）.src=window.URL.createObjectURL（inputData.files[0]）
}
这两种方法对我都很有效。非常感谢。还有关于如何更改图像颜色的任何建议，仅flash或photoshop是此选项，或者是否有其他选项？？是的，这将起作用，最终您将更改事件绑定到文件输入并调用函数（完成其余任务）。我在回答中也提到了同样的事情，但将所有代码放在bind函数中，而不是单独的javascrpt函数中。您有问题吗solved@logan对这解决了我的问题，谢谢。如果提供的答案有帮助，请接受更适合你的答案。这个答案与从解决方案提供商那里偷来的答案相同，基本上是为了得分。不酷。在某些情况下，图像不会立即更新。如果我在事件
onchange
中添加更多的代码，它可能会在图像的上一个副本上运行。有没有办法等待图像上传？
<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');
}
}

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

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])
    }