相关疑难解决方法(0)

使用Javascript上传前检查图像宽度和高度

我有一个JPS,其中包含一个用户可以放置图像的表单:

<div class="photo">
    <div>Photo (max 240x240 and 100 kb):</div>
    <input type="file" name="photo" id="photoInput" onchange="checkPhoto(this)"/>
</div>
Run Code Online (Sandbox Code Playgroud)

我写过这个js:

function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}
Run Code Online (Sandbox Code Playgroud)

它可以很好地检查文件类型和大小.现在我想检查图像的宽度和高度,但我不能这样做.
我试过target.files[0].width但我得到了undefined.通过其他方式我得到0.
有什么建议?

javascript file-upload image image-size

97
推荐指数
7
解决办法
17万
查看次数

使用filereader获取图像的宽度和高度

我正在构建一个图像调整大小/裁剪,我想在他们用模态(bootstrap)编辑它之后显示一个实时预览.我相信这应该可行,但我在console.log中得到0.这需要将原始图像的宽度和高度输入另一个脚本(我将在之后执行,现在只需要它们在console.log /变量中)

function doProfilePictureChangeEdit(e) {
    var files = document.getElementById('fileupload').files[0];
    var reader = new FileReader();
    reader.onload = (function(theFile) {
        document.getElementById('imgresizepreview').src = theFile.target.result;

        document.getElementById('profilepicturepreview').src = theFile.target.result;
      }
    );
    reader.readAsDataURL(files);
    var imagepreview = document.getElementById('imgresizepreview');
    console.log(imagepreview.offsetWidth);
    $('img#imgresizepreview').imgAreaSelect({
        handles: true,
        enable: true,
        aspectRatio: "1:1",
        onSelectEnd: preview
    });
    $('#resizeprofilepicturemodal').modal('show');
    };
Run Code Online (Sandbox Code Playgroud)

javascript dom filereader

39
推荐指数
2
解决办法
5万
查看次数

标签 统计

javascript ×2

dom ×1

file-upload ×1

filereader ×1

image ×1

image-size ×1