js显示上传图片的缩略图、验证上传文件的格式、验证上传文件大小、验证图片宽、高

来源：互联网发布：desmume模拟器mac版编辑：程序博客网时间：2024/05/16 07:39

js显示上传图片的缩略图、验证上传文件的格式、验证上传文件大小、验证图片宽、高

作为刚入职几个月的小萌新，接到的其中一个需求，就是做OA首页广告位的图片功能，虽然增删改查很简单，不过就难在上传图片和显示图片这个地方。我最不擅长，最讨厌的就是上传功能。不过最后也解决了。今天的文章，主要是显示图片缩略图和系列验证功能。也让我耗费了1天工作日的时间，主要是请教项目组的大佬，在百度上找大佬的文章、博客。因为这功能我以前没弄过。（最后再上功能需求图）

上代码，用google浏览器，可用

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  <c:set var="ctx" value="${pageContext.request.contextPath}" />  <html>  <head>  <title></title>  <script type="text/javascript" src="${ctx }/jquery/jquery-1.8.3.js"></script>  <script type="text/javascript">      //下面用于图片上传预览功能、后缀名判断、文件大小、图片宽高判断    // 若是某一函数要调用该函数，则可以 setImagePreview($("#file")[0])    function setImagePreview(obj) {                //var filename = obj.value;// 如 C:\xxx.png                if(obj.value == null || obj.value == '') {//也可以不写这个判断            obj.outerHTML=obj.outerHTML;//清空            return;        }          //验证文件扩展名是否符合要求          var res = validateExtends(obj);          if (res == false) {            alert("文件不合法,暂只支持jpg、png、bmp格式!");            obj.outerHTML=obj.outerHTML;//清空            return;          }          //验证大小          res = validateSize(obj);          if (res == false) {              obj.outerHTML=obj.outerHTML;//清空            return;          }            //还可以验证图片的  width 和 height          //注意，这里有个坑，清空文件操作，是在函数里执行的          //img.onload 是在  显示图片才执行的。          //具体原因请看函数内          widthAndHeight(obj);            //获得 路径，显示图片，如果调用  widthAndHeight 函数，下面两句代码要注释          //var objUrl = getObjectURL(f.files[0]);          //$("#preview").attr("src", objUrl);            //获得 图片 路径          function getObjectURL(obj) {            debugger;            var url = null;              if (window.createObjectURL != undefined) { // basic                  url = window.createObjectURL(obj);//这个未触发过，不知道对不对，如果报错，参数改成 obj.files[0]            } else if (window.URL != undefined) { // mozilla(firefox)                  url = window.URL.createObjectURL(obj.files[0]);// google浏览器 走了这句代码            } else if (window.webkitURL != undefined) { // webkit or chrome                  url = window.webkitURL.createObjectURL(obj);//这个未触发过，不知道对不对，如果报错，参数改成 obj.files[0]            }              return url;          }            //验证 文件后缀名是否符合要求          function validateExtends(obj) {            var arr = [ "jpg", "png", "bmp" ];//文件后缀名            var name = obj.value;//文件名   C:\xxx.png            //获得文件后缀名              var index = name.lastIndexOf(".");              //截取字符串，并转换为小写            var ext = name.substr(index + 1).toLowerCase();              //判断后缀名是否符合要求              for (var j = 0; j < arr.length; j++) {                  if (ext == arr[j]) {                      return true;//符合                  }              }              return false;//不符合          }            //验证上传文件大小          function validateSize(obj) {            var name = obj.value;//文件名   xxx.png            //判断文件大小是否超过5M              var size = obj.size / 1024;// 字节 / 1024 = KB              var max_size = 5 * 1024;//允许最大KB              if (size == 0) {                alert(name + " 为空文件");                return false;              } else if (size > max_size) {                alert(name + " 大小超过5M");                return false;            }              return true;          }            //验证图片的width 和 height          function widthAndHeight(obj) {            //创建虚拟的img图片，只是为了能获取上传图片的宽和高              var img = new Image();              img.src = getObjectURL(obj);              img.onload = function() {                  var width = this.width;                var height = this.height;                //进行判断，是否符合像素要求                if (width > 500 || height > 500) {                    alert("图片宽不能大于500像素，图片高不能大于500像素");                    obj.outerHTML=obj.outerHTML;//清空                    return;                }                //获得路径，显示图片                  var objUrl = getObjectURL(obj);                $("#preview").attr("src", objUrl);                  //问：为什么显示图片的代码放这里？                  //答：因为如果放外面，会先显示图片，然后在执行这个  img.onload 函数                  //    找了好久，都没找到解决函数，所以只能放  img.onload 函数里面                  //      所以，如果要判断上传图片的宽高，这两句代码要写在这里面                  //      外面的两句代码要注释掉              };//end onload          }        }// setImagePreview  </script></head>  <body>        <div>  <span>缩略图：</span>   <img id="preview" alt="" src="" style="width: 300; height: 300;">  </div> <br />  <input type="file" id="file" name="file" onchange="setImagePreview(this)">    </body>  </html>

阅读全文

0 0