js显示上传图片的缩略图、验证上传文件的格式、验证上传文件大小、验证图片宽、高
2017-05-26 14:25
1496 查看
js显示上传图片的缩略图、验证上传文件的格式、验证上传文件大小、验证图片宽、高
作为刚入职几个月的小萌新,接到的其中一个需求,就是做OA首页广告位的图片功能,虽然增删改查很简单,不过就难在上传图片和显示图片这个地方。我最不擅长,最讨厌的就是上传功能。不过最后也解决了。今天的文章,主要是显示图片缩略图和系列验证功能。也让我耗费了1天工作日的时间,主要是请教项目组的大佬,在百度上找大佬的文章、博客。因为这功能我以前没弄过。(最后再上功能需求图)
上代码,用google浏览器,可用
![](https://img-blog.csdn.net/20170526152741647?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2pfenl6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170526152746006?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2pfenl6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](https://img-blog.csdn.net/20170526152751740?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2pfenl6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
作为刚入职几个月的小萌新,接到的其中一个需求,就是做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>
相关文章推荐
- ajaxFileUpload.js上传图片插件,全浏览器兼容,规避json错误,带文件格式大小拦截
- js图片上传验证图片格式和大小尺寸
- JS验证上传图片格式和大小
- js 验证上传图片大小及格式
- Js下检查上传图片文件格式和大小的方法,兼容ie和火狐
- 上传图片时js验证图片大小、尺寸、格式
- js验证上传文件大小、图片类型限制
- 上传图片前判断文件格式与大小验证文件是不是图片
- js验证上传图片格式和大小是否符合要求
- 多个上传文件用js验证文件的格式和大小的方法(推荐)
- js上传文件(图片)限制格式及大小
- js验证上传图片文件大小,类型等
- js验证上传图片文件大小,类型等
- ASP.NET上传图片,服务器端验证,宽度,高度,文件类型,尺寸,文件大小,图片上传,图片格式检查
- js验证上传图片大小和格式
- 上传图片前判断文件格式与大小验证文件是不是图片
- js实现图片文件校验,验证上传的文件是图片和其后缀名,大小
- ASP.NET上传图片,服务器端验证,宽度,高度,文件类型,尺寸,文件大小,图片上传,图片格式检查
- js 图片上传前大小长宽验证代码
- 验证上传文件的格式是否是图片的一个函数