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');
}
}
最佳答案
在调用 onchange 时只需要发送 this
对象而不是 this.value
<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" >
绑定(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');
}
});
});
关于javascript - onchange 文件输入更改 img src 并更改图像颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24837646/