javascript - JQuery 文件输入 - 读取图像宽度和高度
问题描述
我正在尝试读取(输入类型=“文件”)图像文件的原始宽度/高度。我的代码给了我“未定义”。我想是因为我没有将图像加载到服务器或任何地方。
这是我的代码;
<script>
$( document ).ready(function() {
$('#texture_modal').click(function () {
var texture_name = $('#texture_name').val();
var thumb_img = $('#thumb_img').val().replace(/^.*\\/, "");
var big_img = $('#big_img').val().replace(/^.*\\/, "");
var real_img = $('#real_img').val().replace(/^.*\\/, "");
var img_size = document.getElementById("real_img").files[0].size / (1024*1024); // Get real_img size in MB
var texture_size = img_size.toFixed(2); // get rid of decimals in real_img size MB
var texture_category = $('#texture_category').val();
var texture_description = $('#texture_description').val();
// THIS IS THE STUFF WHICH I WANT TO GET IMAGE WIDTH
var texture_dim = document.getElementById("real_img").naturalWidth;
console.log(texture_dim);
}); //End click function
}); //End document ready
</script>
这是我的输入字段。我有多个文件输入,用于缩略图、大图像和真实图像。我只需要真实的图像宽度,其他的将上传到服务器。这是我的输入字段;
<!-- this fields are inside a bootstrap modal -->
<div class="modal-body">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text"><small>Texture Name</small></span>
</div>
<input type="text" class="form-control" id="texture_name">
</div>
<div class="form-group pt-1">
<small>Thumbnail Img(200*200)</small>
<input type="file" class="form-control form-control-sm" id="thumb_img">
<small>Big Img(445*445)</small>
<input type="file" class="form-control form-control-sm" id="big_img">
<!-- this one i want to take width without post or upload anywhere -->
<small>Real Img</small>
<input type="file" class="form-control form-control-sm" id="real_img">
<!-- taking categories with php function -->
<small>Category</small>
<select id="texture_category" class="form-control form-control-sm">
<option selected disabled>----- Choose a Category -----</option>
<?php foreach($texture_categories as $key){?>
<option><?php echo $key; ?></option>
<?php } ?>
</select>
<small>Description :</small>
<textarea id="texture_description" class="form-control form-control-sm"></textarea>
</div>
</div>
解决方案
你能尝试分配一个图像并得到它吗
var fileUpload=document.getElementById("photoInput");
function Test(){
var reader = new FileReader();
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function () {
var width = this.naturalWidth || this.width;
var height = this.naturalHeight || this.height;
console.log(height,width)
}
};
}
<div class="photo">
<input type="file" name="photo" id="photoInput" onchange="Test(this)"/>
</div>
在你的例子中
$( document ).ready(function() {
$(".modal").modal()
});
function Test(){
var fileUpload=document.getElementById("thumb_img");
var reader = new FileReader();
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function (e) {
var image = new Image();
image.src = e.target.result;
image.onload = function () {
var width = this.naturalWidth || this.width;
var height = this.naturalHeight || this.height;
console.log(height,width)
}
};
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- this fields are inside a bootstrap modal -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text"><small>Texture Name</small></span>
</div>
<input type="text" class="form-control" id="texture_name">
</div>
<div class="form-group pt-1">
<small>Thumbnail Img(200*200)</small>
<input type="file" class="form-control form-control-sm"onchange="Test(this)" id="thumb_img">
<small>Big Img(445*445)</small>
<input type="file" class="form-control form-control-sm" id="big_img">
<!-- this one i want to take width without post or upload anywhere -->
<small>Real Img</small>
<input type="file" class="form-control form-control-sm" id="real_img">
<!-- taking categories with php function -->
<small>Category</small>
<select id="texture_category" class="form-control form-control-sm">
<option selected disabled>----- Choose a Category -----</option>
<?php foreach($texture_categories as $key){?>
<option><?php echo $key; ?></option>
<?php } ?>
</select>
<small>Description :</small>
<textarea id="texture_description" class="form-control form-control-sm"></textarea>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 路径中最深文件夹的 Google Apps 脚本 getId()
- excel - 使用变体数组更新单元格
- javascript - 如何使用 Javascript 将 HTML 中的数字减 20
- php - 如何查看一段时间内执行了哪些php文件?
- iis - .Net 核心框架版本 vs Nuget 包版本 + IIS
- c# - 通过 TCP/IP 使用 C# 发送字符串
- r - 使用 Bookdown 创建带有下标和彩色行的表格
- html - Boostrap 4导航栏下拉淡入淡出效果在悬停时不起作用
- c# - 如何纠正错误的文本编码?
- firebase - 如何获取对 Firebase 实时数据库的参考