当文件输入改变时，更改图像源并更改图像颜色。

Question

当文件输入改变时，更改图像源并更改图像颜色。

57

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

 <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

- Jill

你的问题解决了吗？ - logan Sarav

@logan 是的。http://jsfiddle.net/stN8U/1/ 这个解决了我的问题。谢谢。 - Jill

2

如果答案有帮助，请接受最适合您的答案。 - logan Sarav

5个回答

49

简单解决方案。无需 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])">

- Arif

在某些情况下，图像不会立即更新。如果我向事件“onchange”添加一些代码，它可能会在先前的图像副本上运行。有没有一种方法可以等待图像上传？ - Simone

11

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

- Yacine MEDDAH

2

使用以下代码，您将在上传时获得图像预览

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

- Sankar Jay

这个答案与主要答案相同，基本上是从解决方案提供者那里抄袭来获得积分的。在我看来不太好。 - Kalob Taulien

2

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

- Amzad Khan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bhushan Kawadkar · Accepted Answer

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

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

因为您在函数中将input变量用作this，就像在第几行：

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

演示DEMO

编辑 - 尝试像下面这样使用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演示