html5图片宽度和高度怎么,HTML5表单检查图像的宽度和高度，如果更大则提醒(HTML5 Form Check image width and height and alert if bigger...
HTML5表单检查图像的宽度和高度，如果更大则提醒(HTML5 Form Check image width and height and alert if bigger)
编辑
不是重复的
如果文件尺寸较大而不是大小，则需要停止表单提交。 其他帖子中的一些答案与文件大小有关，我的问题是关于维度。 尺寸和尺寸是两个不同的东西......
我使用以下表格上传图片。 它工作正常，但因为它是一个商店，我希望产品目录看起来不错，我需要上传的图像正好是200px宽度和200px高度。 如果图像的宽度或高度较大，我需要显示警告，以便上传者选择其他图像或编辑他要上传的图像。
Upload image:
$('#image-file').bind('change', function() {
alert('here we have to do something');
});
EDIT
NOT A DUPLICATED
Need to stop the form submit if the file is bigger in dimension not in size. Some answers in other posts are about file size, my question is about dimensions. Size and dimensions are 2 different things ...
I am using the following form to upload images. It is working fine but because it is a store and I want the catalog of products to looks nice I need the images uploaded to be exactly 200px width and 200px height. If the image is bigger in width or height I need to show an alert so the uploader chose another image or edit the one he is trying to upload.
Upload image:
$('#image-file').bind('change', function() {
alert('here we have to do something');
});
原文：https://stackoverflow.com/questions/38427746
更新时间：2019-12-19 02:12
最满意答案
可能重复吗？ 取自这里的答案并适合您：
我同意上述答案，并在表格提交上执行：
$( document ).ready(function() {
$("#ImageForm").submit( function( e ) {
var form = this;
e.preventDefault(); //Stop the submit for now
//Replace with your selector to find the file input in your form
var fileInput = $(this).find("#image-file")[0],
file = fileInput.files && fileInput.files[0];
console.log(file)
if( file ) {
var img = new Image();
img.src = window.URL.createObjectURL( file );
img.onload = function() {
var width = img.naturalWidth,
height = img.naturalHeight;
window.URL.revokeObjectURL( img.src );
if( width <= 200 && height <= 200) {
form.submit();
}
else {
alert('too big');
}
};
}
else { //No file was input or browser doesn't support client side reading
form.submit();
}
});
});
Upload image:
正如我的链接中的答案所说，您还需要将此服务器端检查为a)您不能信任客户端b)旧浏览器可能无法正常工作。
Possible duplicate? Taken from answer here and adapted for you:
I would agree with above answer and do it on the form submit:
$( document ).ready(function() {
$("#ImageForm").submit( function( e ) {
var form = this;
e.preventDefault(); //Stop the submit for now
//Replace with your selector to find the file input in your form
var fileInput = $(this).find("#image-file")[0],
file = fileInput.files && fileInput.files[0];
console.log(file)
if( file ) {
var img = new Image();
img.src = window.URL.createObjectURL( file );
img.onload = function() {
var width = img.naturalWidth,
height = img.naturalHeight;
window.URL.revokeObjectURL( img.src );
if( width <= 200 && height <= 200) {
form.submit();
}
else {
alert('too big');
}
};
}
else { //No file was input or browser doesn't support client side reading
form.submit();
}
});
});
Upload image:
As the answer in my link says you need to also check this server side as a) you cannot ever trust the client b) older browsers might not work.
相关问答
有很多方法可以调用drawImage 一个是： ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 其中dx，dy，dw，dh是目标x，y，宽度和高度。 如果您使dw和dh始终为800x600，则绘制的图像将始终自动缩放到800x600。 这是一个很小的例子，总是将任意大小的图像绘制到800x600 http://jsfiddle.net/jAT8Y/ There are many ways to call drawImage One is:
...
对于多个文件上传，以下内容来自手册 - 以防您没有找到它。 我希望这在上传后尝试访问变量时提供足够的指导。 -----------------------------------
Example #1 Uploading multiple files
-----------------------------------
Send these
...
该文件只是一个文件，您需要创建如下图像： var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
alert(this.width + " " + th
...
是否可以欺骗绝对定位的副本，以及缩略图，嵌套在指定相对位置的包装div中？
.meDiv
{
position:relative;
border:1px solid black;
width:200px;
height:100px;
}
.meSmall
{
display:block;
width:100%;
...
可能重复吗？ 取自这里的答案并适合您： 在上传之前是否可以检查图像的尺寸？ 我同意上述答案，并在表格提交上执行： $( document ).ready(function() {
$("#ImageForm").submit( function( e ) {
var form = this;
e.preventDefault(); //Stop the submit for now
//Replace with
...
min(1,仅在您只想减少大图像而不调整较小图像时才需要： $maxWidth = 1000;
$maxWidthIfVertical = 600;
$factor = $width > $height ? min(1, $maxWidth / $width) : min(1, $maxWidthIfVertical / $width);
$newWidth = $width * $factor;
$newHeight = $height * $factor;
注意这个方法，请参阅我在这里添加的
...
为函数添加参数，例如uploadImageFile($dirName, $iWidth, $iHeight) ，然后使用不同的大小多次调用它 <?php
function uploadImageFile() { // Note: GD library is required for this function
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$iJpgQuality = 90;
if ($
...
根据HTML5规范，它不是必需的： canvas元素有两个属性来控制坐标空间的大小：宽度和高度。 这些属性在指定时必须具有有效的非负整数值。 必须使用解析非负整数的规则来获取它们的数值。 如果某个属性缺失，或者解析其值时返回错误，则必须使用默认值。 width属性默认为300，height属性默认为150。 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html According to
...
即使@ arkascha的建议相当不错，但将文件保存为文件名哈希要好得多。 有了这个， $ext = pathinfo($filename, PATHINFO_EXTENSION);
$filehash = sha1($filename.$width.$height);
$filename = $filehash.".".$ext
你可以防止我遇到的问题。 Even though @arkascha's suggestion was quite good but saving the
...
它无法工作的原因是因为您正在更改 HTML节点的属性。 这些属性是布局指令如何在文档中显示节点(顺便说一下，这是过时的。使用CSS进行布局)。 图像元素中显示的图像材料的宽度和高度与此无关。 The reason why it isn't working is because you are changing the properties of the HTML node. These properties are layouting instructions how the
...