Как просмотреть изображение, получить размер файла, высоту и ширину изображения перед загрузкой?

Как я могу получить размер файла, высоту и ширину изображения перед загрузкой на мой сайт, с помощью jQuery или JavaScript?

90

Решение

HTML5 и Файловый API

Вот без комментариев пример фрагмента рабочего кода:

window.URL    = window.URL || window.webkitURL;
var elBrowse  = document.getElementById("browse"),
elPreview = document.getElementById("preview"),
useBlob   = false && window.URL; // set to `true` to use Blob instead of Data-URL

function readImage (file) {
var reader = new FileReader();

reader.addEventListener("load", function () {
var image  = new Image();

image.addEventListener("load", function () {
var imageInfo = file.name +' '+
image.width +'×'+
image.height +' '+
file.type +' '+
Math.round(file.size/1024) +'KB';

// Show image and info
elPreview.appendChild( this );
elPreview.insertAdjacentHTML("beforeend", imageInfo +'<br>');

if (useBlob) {
// Free some memory
window.URL.revokeObjectURL(image.src);
}
});
image.src = useBlob ? window.URL.createObjectURL(file) : reader.result;
});

reader.readAsDataURL(file);
}elBrowse.addEventListener("change", function() {

var files = this.files, errors = "";

if (!files) {
errors += "File upload not supported by your browser.";
}

if (files && files[0]) {

for(var i=0; i<files.length; i++) {
var file = files[i];

if ( (/\.(png|jpeg|jpg|gif)$/i).test(file.name) ) {
readImage( file );
} else {
errors += file.name +" Unsupported Image extension\n";
}

}
}

// Handle errors
if (errors) {
alert(errors);
}

});
#preview img{height:100px;}
<input id="browse" type="file"  multiple />
<div id="preview"></div>
168

Другие решения

Если вы можете использовать плагин проверки jQuery, вы можете сделать это так:

Html:

<input type="file" name="photo" id="photoInput" />

JavaScript:

$.validator.addMethod('imagedim', function(value, element, param) {
var _URL = window.URL;
var  img;
if ((element = this.files[0])) {
img = new Image();
img.onload = function () {
console.log("Width:" + this.width + "   Height: " + this.height);//this will give you image width and height and you can easily validate here....

return this.width >= param
};
img.src = _URL.createObjectURL(element);
}
});

Функция передается как функция ab onload.

Код взят из Вот

7

Не уверен, что это то, что вы хотите, но просто простой пример:

var input = document.getElementById('input');

input.addEventListener("change", function() {
var file  = this.files[0];
var img = new Image();

img.onload = function() {
var sizes = {
width:this.width,
height: this.height
};
URL.revokeObjectURL(this.src);

console.log('onload: sizes', sizes);
console.log('onload: this', this);
}

var objectURL = URL.createObjectURL(file);

console.log('change: file', file);
console.log('change: objectURL', objectURL);
img.src = objectURL;
});
4

Вот чистый пример JavaScript для выбора файла изображения, его отображения, циклического просмотра свойств изображения, а затем изменения размера изображения с холста в тег IMG и явной установки типа изображения с измененным размером jpeg.

Если щелкнуть правой кнопкой мыши верхнее изображение в теге canvas и выбрать «Сохранить файл как», по умолчанию будет использоваться формат PNG. Если щелкнуть правой кнопкой мыши и сохранить файл как нижнее изображение, он по умолчанию будет в формате JPEG. Любой файл с шириной более 400 пикселей уменьшается до 400 пикселей по ширине, а высота пропорциональна исходному файлу.

HTML

<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>

<canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>
<div id='allImgProperties' style="display:inline"></div>

<div id='imgTwoForJPG'></div>

SCRIPT

<script>

window.picUpload = function(frmData) {
console.log("picUpload ran: " + frmData);

var allObjtProperties = '';
for (objProprty in frmData) {
console.log(objProprty + " : " + frmData[objProprty]);
allObjtProperties = allObjtProperties + "<span>" + objProprty + ": " + frmData[objProprty] + ", </span>";
};

document.getElementById('allImgProperties').innerHTML = allObjtProperties;

var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");

var img = new Image;
img.src = URL.createObjectURL(frmData);

console.log('img: ' + img);

img.onload = function() {
var picWidth = this.width;
var picHeight = this.height;

var wdthHghtRatio = picHeight/picWidth;
console.log('wdthHghtRatio: ' + wdthHghtRatio);

if (Number(picWidth) > 400) {
var newHeight = Math.round(Number(400) * wdthHghtRatio);
} else {
return false;
};

document.getElementById('cnvsForFormat').height = newHeight;
console.log('width: 400  h: ' + newHeight);
//You must change the width and height settings in order to decrease the image size, but
//it needs to be proportional to the original dimensions.
console.log('This is BEFORE the DRAW IMAGE');
ctx.drawImage(img,0,0, 400, newHeight);

console.log('THIS IS AFTER THE DRAW IMAGE!');

//Even if original image is jpeg, getting data out of the canvas will default to png if not specified
var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
//The type and size of the image in this new IMG tag will be JPEG, and possibly much smaller in size
document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
};
};

</script>

Вот jsFiddle:

jsFiddle Выбор, отображение, получение свойств и изменение размера файла изображения

В jsFiddle щелчок правой кнопкой мыши на верхнем изображении, являющемся холстом, не даст вам тех же параметров сохранения, что и при щелчке правой кнопкой мыши по нижнему изображению в теге IMG.

2

Поэтому я начал экспериментировать с различными функциями API FileReader и мог создать тег IMG с URL-адресом DATA.

Недостаток: он не работает на мобильных телефонах, но отлично работает в Google Chrome.

$('input').change(function() {

var fr = new FileReader;

fr.onload = function() {
var img = new Image;

img.onload = function() {
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
$.ajax({url: img.src, async: false, success: function(result){
$("#result").html("READING IMAGE, PLEASE WAIT...")
$("#result").html("<img src='" + img.src + "' />");
console.log("Finished reading Image");
}});
};

img.src = fr.result;
};

fr.readAsDataURL(this.files[0]);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" capture="camera">
<div id='result'>Please choose a file to view it. <br/>(Tested successfully on Chrome - 100% SUCCESS RATE)</div>
1

Насколько я знаю, сделать это нелегко, поскольку Javascript / JQuery не имеет доступа к локальной файловой системе. В html 5 есть некоторые новые функции, которые позволяют вам проверять определенные метаданные, такие как размер файла, но я не уверен, что вы действительно можете получить размеры изображения.

Вот статья, которую я нашел относительно html 5 функций, и обходной путь для IE, который включает использование элемента управления ActiveX. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html

0

Работающий пример проверки JQuery:

   $(function () {
$('input[type=file]').on('change', function() {
var $el = $(this);
var files = this.files;
var image = new Image();
image.onload = function() {
$el
.attr('data-upload-width', this.naturalWidth)
.attr('data-upload-height', this.naturalHeight);
}

image.src = URL.createObjectURL(files[0]);
});

jQuery.validator.unobtrusive.adapters.add('imageminwidth', ['imageminwidth'], function (options) {
var params = {
imageminwidth: options.params.imageminwidth.split(',')
};

options.rules['imageminwidth'] = params;
if (options.message) {
options.messages['imageminwidth'] = options.message;
}
});

jQuery.validator.addMethod("imageminwidth", function (value, element, param) {
var $el = $(element);
if(!element.files && element.files[0]) return true;
return parseInt($el.attr('data-upload-width')) >=  parseInt(param["imageminwidth"][0]);
});

} (jQuery));
0
По вопросам рекламы [email protected]