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

onchange事件不起作用。我应该怎么做才能在同一页面上获得结果。我不想重定向到任何其他页面上传图片。这个问题是因为opencart吗？我不知道在cPanel中这样写是否正确。我正在使用opencart和cpanel。有没有其他方法？onchange文件输入更改img src并更改图像颜色

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

来源

2014-07-19 Jill

有你的问题解决了 –

@logan肯定。 http://jsfiddle.net/stN8U/1/这解决了我的问题谢谢。 – Jill

如果提供的答案有帮助，请接受更适合您的答案。 –

您需要发送this对象改为只this.value同时呼吁平变化

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

，因为你正在使用input变量作为this在你的功能，如在线路

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

Working 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 Demo

来源

2014-07-19 07:03:26

http://jsfiddle.net/M3kj6/1/和http://jsfiddle.net/stN8U/1/都适合我。谢谢。也有关于如何更改图像颜色的任何建议只有闪光灯或Photoshop是选择这个或有任何其他选项？ – Jill

是的，这将工作，最终你绑定到文件输入和调用功能（这是做任务的其余部分）的变化事件。我在我的回答中提到的同样的事情，但把所有的代码里面绑定函数，而不是在单独的javascrpt函数。 –

对不起，我不知道如何更改图像的颜色。可能你比我更了解，对此感到遗憾。 –

尝试使用此代码，您将获得的图像预览，而在你的HTML上传

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

来源

2014-07-21 18:55:15

：<input type="file" id="yourFile"> 不要忘记引用您的js文件或者把<script></script> 之间下面的脚本在脚本：

var fileToRead = document.getElementById("yourFile"); 

fileToRead.addEventListener("change", function(event) { 
    var files = fileToRead.files; 
    var len = files.length; 
    // we should read just one file 
    if (len) { 
     console.log("Filename: " + files[0].name); 
     console.log("Type: " + files[0].type); 
     console.log("Size: " + files[0].size + " bytes"); 
    } 

}, false);

来源

2015-04-02 21:05:59 Yacine

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

回答

相关问题