改变文件输入，改变img src和改变图像颜色。
改变文件输入，改变img src和改变图像颜色。
提问于 2014-07-19 06:57:00
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
回答 5
Stack Overflow用户
发布于 2014-07-19 07:03:26
在调用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" >将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演示
Stack Overflow用户
发布于 2019-06-26 16:41:55
简单解没有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])">
Stack Overflow用户
发布于 2015-04-02 21:05:59
在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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24837646
复制相关文章
相似问题
腾讯云开发者
