高度,javascript判断上传图片大小，宽度，高度资源-CSDN文库

共1个文件

html：1个

3星 · 超过75%的资源需积分: 35 201 浏览量 2010-06-27 07:22:30 上传评论 2 收藏 1KB RAR 举报

在JavaScript中，对上传图片进行大小、宽度和高度的判断是一项常见的前端操作，尤其是在实现用户在网站上上传图片时需要预览和验证图片格式及尺寸的场景。以下是一些关于如何使用JavaScript进行这些判断的关键知识点： 1. **File API**： JavaScript中的File API允许我们直接操作文件对象，包括读取其元数据。当用户选择一个文件进行上传时，我们可以获取到一个`File`对象，这个对象包含了文件的信息。 2. **FileReader接口**： `FileReader`是File API的一部分，它可以读取文件的内容。通过`readAsDataURL`方法，我们可以将图片文件转化为DataURL，然后解析出图片的宽度和高度。 3. **Image对象**：创建一个新的`Image`对象，将`FileReader`读取到的DataURL设置为`src`属性。当图像加载完成后，`onload`事件会被触发，此时可以访问到图片的`width`和`height`属性。 4. **判断图片大小**：图片的大小通常指的是它的字节数，可以通过`File`对象的`size`属性获取。如果需要限制上传图片的大小，可以比较`size`与设定的阈值。 5. **事件处理**：使用`FileReader`的`onload`事件来处理图片加载完成后的操作，如计算宽高和大小检查。同时，还要注意处理可能的错误，例如`onerror`事件。 6. **代码示例**： ```javascript const fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (!file.type.startsWith('image/')) { alert('只接受图片文件!'); return; } if (file.size > MAX_IMAGE_SIZE) { alert('图片大小超过限制!'); return; } const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { if (img.width > MAX_WIDTH || img.height > MAX_HEIGHT) { alert('图片尺寸超过限制!'); return; } // 图片尺寸和大小都符合要求，可以进行后续处理 console.log('图片宽度:', img.width, '高度:', img.height); }; img.onerror = () => { alert('无法读取图片!'); }; img.src = e.target.result; }; reader.readAsDataURL(file); }); ``` 在这个示例中，`MAX_IMAGE_SIZE`、`MAX_WIDTH`和`MAX_HEIGHT`分别代表允许的最大文件大小和尺寸。 7. **性能优化**：为了避免不必要的资源消耗，可以先验证图片类型和大小，只有在满足条件后才创建`Image`对象加载图片。此外，还可以使用`URL.createObjectURL(file)`代替`FileReader`来创建一个临时的URL，这样可以在不完全加载图片的情况下获取元数据。 8. **兼容性**：虽然现代浏览器普遍支持File API和Image对象，但要注意老版本的IE可能不支持，需要添加适当的 polyfill 或者使用其他替代方案。通过以上方法，开发者可以有效地在前端对上传的图片进行大小和尺寸的验证，提高用户体验并防止服务器接收过大或不符合要求的图片。

资源推荐

资源详情

资源评论

收起资源包目录

js判断上传图片大小，宽度，高度.rar （1个子文件）

js判断上传图片大小，宽度，高度.html 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>validate before upload by Lance Zhang</title> </head> <body style="font-family:Calibri"> <form name="Myform"> <p> <font color="red" size="6">File type :gif,jpg,jpeg,png,bmp</font></p> <p> File Size limit: <input type="text" size="4" value="100" name="fileSizeLimit" id="fileSizeLimit" /> K</p> <p> Image Height Limit: <input type="text" size="4" value="100" name="heightLimit" id="heightLimit" /> </p> <p> Image Width Limit: <input type="text" size="4" value="100" name="widthLimit" id="widthLimit" /> </p> <p> <input type="file" name="photo" onchange="changeSrc(this)" /> Image Preview<img src="about:blank" id="fileChecker" name="fileChecker" alt="test" /> </p> <p> <input type="submit" value="submit"> </p> </form> <script type="text/javascript"> function CheckFileSize() { var limit = document.getElementById("fileSizeLimit").value * 1024; var width = document.getElementById("widthLimit").value ; var height = document.getElementById("heightLimit").value; if (oFileChecker.fileSize > limit) { alert("FileSize :"+oFileChecker.fileSize+"byte--too large!"); } else { alert("FileSize :"+oFileChecker.fileSize+"byte--ok"); } if( oFileChecker.height> height) { alert("ImageHeight :"+oFileChecker.height+"--too height!"); } else { alert("ImageHeight :"+oFileChecker.height+"--ok"); } if(oFileChecker.width> width) { alert("ImageWidth :"+oFileChecker.width+"--too width!"); } else { alert("ImageWidth :"+oFileChecker.width+"--ok"); } return false; } var right_type=new Array(".gif",".jpg",".jpeg",".png",".bmp"); var oFileChecker = document.getElementById("fileChecker"); function changeSrc(filePicker) { if(!checkImgType(filePicker.value)) { alert("the file type is not correct"); return; } oFileChecker.src = filePicker.value; } oFileChecker.onreadystatechange = function () { if (oFileChecker.readyState == "complete") { CheckFileSize(); } } function checkImgType(fileURL) { var right_typeLen=right_type.length; var imgUrl=fileURL.toLowerCase(); var postfixLen=imgUrl.length; var len4=imgUrl.substring(postfixLen-4,postfixLen); var len5=imgUrl.substring(postfixLen-5,postfixLen); for (i=0;i<right_typeLen;i++) { if((len4==right_type[i])||(len5==right_type[i])) { return true; } } } </script> </body> </html> 详细出处参考：http://www.jb51.net/article/16210.htm

评论收藏

内容反馈