html5拖拽图片上传，怎么获得图片原始尺寸
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5拖拽图片上传，怎么获得图片原始尺寸相关的知识，希望对你有一定的参考价值。
fileList = e.dataTransfer.files;这句话得到的文件对象中没有图像的尺寸信息，但如果我想根据图像原始尺寸来定制防止图片的框的尺寸，该怎么办
拖拽的过程就不说了，这里主要说一下如何在前端获取到图片的相关信息。
html5里有一个fileReader的全局变量，用来读取本地文件，比如txt，img等，下面是一个简单的代码。
function checkFile(files)var file = files[0];
var reader = new FileReader();
// show表示<div id='show'></div>，用来展示图片预览的
if(!/image\\/\\w+/.test(file.type))
show.innerHTML = "请确保文件为图像类型";
return false;
// onload是异步操作
reader.onload = function(e)
show.innerHTML = '<img src="'+e.target.result+'" alt="img">';
reader.readAsDataURL(file);
这样就能够在不上传到服务器的前提下预览图片。当然，这个问题的重点是获取图片的原始尺寸，html5里还提供了两个变量来获取：naturalWidth和naturalHeight，这两个分别来获取图片的原始宽度和原始高度。
在上面的例子中，就能通过下面的方式获取到：
var width = e.target.naturalWidth;var height = e.target.naturalHeight;
还有一种情况就是，如果已经存在页面里的图片，怎么获取到原始尺寸呢，可以这样：
var img = document.getElementsByTagName('img')[0]; // 获取到图片var width = img.naturalWidth;
var height = img.naturalHeight; 参考技术A 用后台语言去获取不就可以了。为什么一定要在前端来获取图片原始大小呢？即使你要在前端实用，比如php获取到了以后还是可以通过变量传递给前端的。至于PHP怎么获取图片原始大小这个网上很容易找到资料！
thinkphp上传图片如何检验尺寸?
我说的是如何检验图片的长宽比例，比如：只能上传1002*60的图片，该怎么验证？
用getimagesize方法，如下示例：
HTML页面
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body font-size:14px;
input vertical-align:middle; margin:0; padding:0
.file-box position:relative;width:340px
.txt height:22px; border:1px solid #cdcdcd; width:180px;cursor: pointer;
.btn background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;cursor: pointer;
.file position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px;cursor: pointer;
</style>
</head>
<body>
<div class="file-box">
<form action="test.php" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
</body>
</html>
PHP页面：
<?phpecho "<pre>";
print_r($_FILES);
echo "<br />";
$size = getimagesize($_FILES['fileField']['tmp_name']);
echo "<pre>";
print_r($size);
?>
demo效果示意图
点击浏览选择图片，然后点击上传后的输出
第二个输出的数组有你需要的相关数据。
看看是否符合你的需求？若有疑问，欢迎追问！
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小(字节为单位)
// ... ...
或
$upload = new \Think\Upload(array(
'maxSize' => 3145728, // 设置附件上传大小(字节为单位)
// ... ...
));// 实例化上传类
然后当尺寸不符时用getError()获得信息.
$info = $upload->upload(); // 上传文件
if(!$info) // 上传错误提示错误信息
$this->error($upload->getError());
else// 上传成功 获取上传文件信息
foreach($info as $file)
echo $file['savepath'].$file['savename'];
参考技术B 判断图片的长和宽
以上是关于html5拖拽图片上传，怎么获得图片原始尺寸的主要内容，如果未能解决你的问题，请参考以下文章