Home > Article > Web Front-end > Share a JS method to obtain image size and preview

Share a JS method to obtain image size and preview

零下一度Original: 2017-04-26 10:53:132194browse

This article mainly introduces the JS method of obtaining image size and preview, and analyzes the related implementation techniques of javascript for different browsers to handle image uploading and previewing operations in the form of a complete example. Friends who need it can refer to it

The example in this article describes the JS method of obtaining image size and preview. Share it with everyone for your reference, the details are as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.php.cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS获取图片大小和预览【兼容IE和其它浏览器】</title>
</head>
<script type="application/javascript">
function previewImage(oImage,preViewId){
  if(!oImage.value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){
    //alert(&#39;图片格式无效！&#39;);
    return;
  }
  var imgPath = "";
  if(document.all){
    //低版本IE浏览器
    oImage.select();
    imgPath = document.selection.createRange().text;
    //使用滤镜效果
    var tempValue = "progid:DXImageTransform.Microsoft.AlphaImageLoader("
    tempValue += "enabled=&#39;true&#39;,sizingMethod=&#39;scale&#39;,src=\"" + imgPath + "\")";
    document.getElementById(preViewId).style.filter = tempValue;
  }else{
    //非IE浏览器，如火狐google等浏览器
    imgPath = window.URL.createObjectURL(oImage.files[0]); //FF7.0以上
    document.getElementById(preViewId).src = imgPath; //显示预览图
  }
};
function getFileSize(objFile){
  var fileSize = objFile.fileSize || 0;
  if(fileSize == 0) {
    fileSize = objFile.files[0].size;
  }
  return fileSize;
}
function imageChange(){
  var oImg = document.getElementById("imageFile01");
  previewImage(oImg,"preview");
  var fileSize = getFileSize(oImg);
  fileSize = Math.ceil(fileSize / 1024) + "KB";
  var filePath =oImg.value;
  var agent = window.navigator.userAgent;
  var tempValue = "<br>File size: " + fileSize;
  tempValue += "<br>File path: " + filePath;
  tempValue += "<br>agent=" + agent;
  document.getElementById("imageInfo").innerHTML = tempValue;
};
</script>
<body>
<h3>JS获取图片大小和预览【兼容IE和其它浏览器】</h3>
<img id="preview" style="width: 100px; height: 60px; border: 0px;" />
<br>
<input name="imageFile01" id="imageFile01" type="file" onchange="javascript:imageChange();" />
<br>
<p id="imageInfo"></p>
</body>
</html>

The above is the detailed content of Share a JS method to obtain image size and preview. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to manage sessions? Use redis to manage sessions under nodejs expressNext article：How to manage sessions? Use redis to manage sessions under nodejs express

See more

Share a JS method to obtain image size and preview

Related articles