Question

我有以下代码

if(MyObject.Properties.Age==null)
{
   MyObject.Properties.Age = new Age();
}

我可以通过此代码获取标题的图像名称

var inputLocalFont = document.getElementById("image-input");
    inputLocalFont.addEventListener("change",previewImages,false);
    function previewImages(){
        var fileList = this.files;
        var anyWindow = window.URL || window.webkitURL;

            for(var i = 0; i < fileList.length; i++){
              var objectUrl = anyWindow.createObjectURL(fileList[i]);                  
              $('.preview-area').append('<img class="resizeme" id="myImage" height="150" src="' + objectUrl + '" + title="' + fileList[i].name + ' ( ' + fileList[i] + ' "/>');
              window.URL.revokeObjectURL(fileList[i]);
            }
    }

但是当我尝试通过添加此代码来添加标题图片中的宽度和高度时

fileList[i].name

它给予＆＃34; undefined ＆＃34;导致

我已经尝试使用fileList[i].width fileList[i].height了并且它给出了相同的结果

我错过了什么？

FLOW

我尝试在用户按下提交并将图像上传到服务器之前创建多个图像预览...我希望每个预览图像都包含工具提示标题，其中包含（名称，宽度，高度）
我已经成功通过

获得工具提示中的名称

fileList[i].naturalWidth

是否可以在工具提示标题中获得图像的宽度和高度？

在圈内添加事件听众

fileList[i].name

我已经尝试在中添加事件监听器 objectUrl / filename [i]

有财产
。宽
.naturalWidth
.clientWidth

我失踪了什么？

HTML

var inputLocalImage = document.getElementById("image-input");
    inputLocalImage.addEventListener("change",previewImages,false);
    function previewImages(){
        var fileList = this.files;
        var anyWindow = window.URL || window.webkitURL;

            for(var i = 0; i < fileList.length; i++){
              var objectUrl = anyWindow.createObjectURL(fileList[i]);                  

              objectUrl.addEventListener("load", function() {
                alert('objectUrl.width');  
              })

              $('.preview-area').append('<img class="resizeme" id="myImage" height="150" src="' + objectUrl + '" + title="' + fileList[i].name + ' (s ' + fileList[i].clientWidth + ' "/>');
              window.URL.revokeObjectURL(fileList[i]);
            }
    }

预览区域类是我的多个图像预览容器...我通过此代码附加它

<div class="row">
      <label for="image" class="control-label col-lg-3">Image<span class="required">*</span></label>
      <div class="col-lg-8">
         <input type="file" class="dimmy" id="image-input" multiple />
         <div class="preview-area"></div>
      </div>
</div>

Answer 1

请参阅此示例：http://jsfiddle.net/kevalbhatt18/pjf3uffs/3/

注意：在此示例中，我没有多个图像，所以我得到宽度和点击图像时的高度

要更改宽度，请使用 inputLocalFont.style.width ='500px';

获取图片名称：

的

的
myGame-app://

的

Object moved to here

的

Answer 2

您需要将eventListener用于图像对象的“load”事件，然后才能获得图像的宽度。

img.createEventListener("load", function() {
   alert(img.width);
})

Javascript无法获得对象图像的宽度

2 个答案: