相关疑难解决方法(0)

如何使用jQuery或JavaScript在上传到我的网站之前获取文件大小,图像高度和宽度？

这是我的示例代码:

var input = document.createElement('input');
input.type = 'file';
document.body.appendChild(input);

input.addEventListener('change', function(){
    var file = input.files[0];

    var reader = new FileReader();
    reader.onload = function(e){
        var image = new Image();
        image.src = e.target.result;
    };
    reader.readAsDataURL(file);
});

加载页面,选择一个大图像(我使用的是2.9MB 4288x3216图像).刷新页面并选择相同的图像.结果？标签崩溃了!(噢,Snap!)

我的猜测是,这是Chrome实施File API的一个错误,但如果有人能够确认,甚至可能提供解决方法,我会喜欢它.我真的希望能够显示照片的缩略图,而不必去服务器生成一个(即使它仅适用于Chrome和FF).

此外,使用上面的示例代码,只要您选择照片,该选项卡就会开始使用大约32MB的内存.我想,这是预期的,但令我担心的是内存似乎永远不会被垃圾收集器释放.因此,如果我继续选择更多照片,我会继续消耗更多内存.我不知道这是否与崩溃问题有关,但这绝对是一个问题.

谢谢你的帮助!

我想在通过Javascript在PHP上传图像之前验证图像分辨率.在我的PHP表单中,我想上传两个不同的图像,两个图像都有不同的分辨率限制.

我尝试以下代码

PHP代码

echo "<form name='add' enctype='multipart/form-data' action='AppActions.php' method='post' onSubmit='return validate_create();'>";
echo "<div class='form_label'>Album Wrapper (Big Image) *</div>";
echo "<div class='form_input'><input type='file' name='bigimage' id='bigimage' />";

echo "<div class='form_label'>Album Wrapper (Small Image) *</div>";
echo "<div class='form_input'><input type='file' name='smallimage' id='smallimage' />;
echo "<input type='submit' name='add' value='Create' class='Buttons' id='add'>";    

在Javascript中

function validate_create()
{
var bigimage = document.getElementById('bigimage');
var smallimage = document.getElementById('smallimage');

var big_img_width = bigimage.clientWidth;
var big_img_height = bigimage.clientHeight;

var small_img_width = smallimage.clientWidth;
var small_img_height = smallimage.clientHeight;

// if condtion to check the …

我需要在上传之前检查图像的尺寸.我在javascript中创建了一个函数进行验证,如下所示

$('#destSubmit').click(function() { 
    var img = document.getElementById('destImage'); 
    var width = img.naturalWidth ; 
    var height = img.naturalHeight ; 
    console.log('width : ' + width + '|| Height : ' + height);
    if(height != 100 || width != 100){
        alert(error);
    }
}

但它显示宽度和高度为undefined;

我知道这是一个重复的问题,但经过长时间的研究后我找不到解决方案.试过这里列出的解决方案如何使用JavaScript获取图像大小(高度和宽度)？,但没用.