关键词:
首先我们来看效果图:
点击上传之后如下:
在这里我获取到文件的大小,并且如果超出我设定的大小,则禁止上传!
不多说,上代码:
先看div布局:
<div class="imageContainer"> <input id="thumbnail" name="thumbnail" required="" type="file" size="100"> <div class="previewDiv "> <div class="upload-icon "> <i class="fa fa-arrow-up"></i> </div> <div class="upload-text">上传文件</div> <image id="showImage"></image> </div> </div>
我们来分析一下该布局
首先,外层DIV有一个imageContainer,表示它是装载图片和input:file框容器。
然后,在容器下方,就是我们上传文件的input框,我将它设为透明,并设置和外层imageContainer一样大小,这样,无论点击外层哪个地方,都能够点击到input控件。(注意:在IE8和IE10要点击两次才能弹出上传文件的对话框)。
在控件下方,就是我们要预览的图片的容器了。那么class=“upload-icon”就是一开始加载的那个上传文件的图标了。
id="showImage"就是我们预览的图片了,它的SRC将会在JS中进行设置。
以下是该布局的CSS样式:
.fileError{
color:red;
font-weight:600;
}
#thumbnail{
display: inline-block;
}
#showImage{
display: inline-block;
width:100%;
height:100%;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
position: absolute;
}
.imageContainer{
position: relative;
}
.imageContainer input{
width:150px;
height:150px;
opacity: 0;
position: absolute;
z-index: 20;
}
.previewDiv{
width:150px;
height:150px;
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
position: relative;
background:#f6f6f6;
border:1px solid #00a0e9;
}
.upload-icon{
position: absolute;
top:30%;
left:37%;
}
.fa-arrow-up{
font-size:40px !important;
}
.upload-text{
position: absolute;
top:58%;
left:31%;
}
下面就让我们一起来看看JS代码吧:
<script> $(function () { $("#thumbnail").change(function () { var fileSize; //兼容旧版IE if($.support.msie){ var fileMgr = new ActiveXObject("Scripting.FileSystemObject"); var filePath = $(this)[0].value; var fileObj = fileMgr.getFile(filePath); fileSize= fileObj[0].size/1024;//字节 }else{ //获取到文件大小,除以1024得到文件的字节数-->kb fileSize = $(this)[0].files[0].size/1024; } //如果文件大于100KB if(fileSize > 100){ //错误提示,用一个DIV来装载 $(".fileError").text("您上传的文件超出大小,请重新上传!"); //让提交按钮变得不可选中,避免文件过大之后仍然提交 $("#submit").attr("disabled",true); }else{ $(".fileError").text(""); $("#submit").attr("disabled",false); } console.log($(this)) //低版本IE不支持FileReader //FileReader读取的是文件的base64编码,即读取文件本身的内容 if (typeof (FileReader) != "undefined") { //正则表达式,判断文件是否是以这些后缀名结尾(都是图片的后缀名) var regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/; //获取到当前对象下的files属性,之后会介绍到files属性里面的东西 var file = $(this)[0].files; //正则表达式匹配 //file[0].name--->获取改文件的文件名 if (regex.test(file[0].name.toLowerCase())){ //实例化对象 var reader = new FileReader(); //加载该对象 reader.onload = function (e) { //e.target.result即为图片的base64编码,通过Jquery设置showImage的src $("#showImage").attr("src", e.target.result); }; reader.readAsDataURL(file[0]);//为了兼容IE,没有这句代码IE实现不了 } else { alert(file[0].name + " 不是一个有效的图片"); return false; } } else { alert("该浏览器不支持图片预览."); } }) }) </script>
对以上的一些数据作详细的解释:
console.log($(this)):得到的数据如下图(注:要在typeof (FileReader) != "undefined")之前打印):
那么$(this)[0]就得到了这个input对象,该对象有下面这些属性和方法,其中一个files属性是我们需要的。
打印一下files看看里面有什么东西:
console.log( $(this)[0].files),如下:
我们发现,它是一个对象数组,第0个元素是名为File的对象,于是我们可以同过 “.”的方式获取到里面的属性,比如说:
name ---> 文件的名字
size ---->文件的大小
type ---->文件的类型和后缀名(jpeg)
lastModified ----》上次修改的时间
那该图片是怎么展示在我们面前的呢?
看以下代码:
reader.onload = function (e) { //e.target.result即为图片的base64编码,通过Jquery设置showImage 的src $("#showImage").attr("src", e.target.result); };
那么e.target.result是什么东西呢?
就是上面这一串东西了,这是图片通过base64编码得到的,将上面这一坨赋值给src之后,图片就能够正常显示了。
mvc中通过jquery实现图片预览上传,并对文件类型大小进行判断(极简)(代码片段)
一、易出错问题重要提示当直接通过提交表单数据上传文件时,文件上传控件input一定要添加name属性,并且不同的控件也要设置不同的name属性值,否则会导致控制器中的Request.Files方法获取上传文件失败。估计Request.Fi... 查看详情
vuetinymce控制图片大小上传,以及富文本编辑框在dialog的问题
参考技术A项目需求需要用到富文本编辑框,表格中操作富文本编辑框,最后选择用弹框的形式显示,注意弹框和富文本编辑框的坑原因:第一次弹框tinymce组件未销毁,因此先于第二次dialog弹出,而第二次dialog中的传值也就后于... 查看详情
获取上传图片的像素大小
今天被一个小伙伴问到如何获取上传图片的像素,实现的方案如下。首先拿到上传的文件(这里默认用户上传的文件类型是图片),然后可以通过fileReader获取图片的base64字符串。接下来,就可以通过Image对象来获取图片的像素了。... 查看详情
jquery实现上传图片及图片大小验证图片预览效果代码
jquery实现上传图片及图片大小验证、图片预览效果代码jquery实现上传图片及图片大小验证、图片预览效果代码上传图片验证*/ functionsubmit_upload_picture(){ varfile=$(‘file_c‘).value; if(!/.(g... 查看详情
java上传图片并压缩图片大小
Thumbnailator是一个优秀的图片处理的Google开源Java类库。处理效果远比JavaAPI的好。从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生成处理后的图片,且允许微调图片的生成方式,同时保... 查看详情
inputfile文件上传,js控制上传文件的大小和格式
文件上传一般是用jquery的uploadify,比较好用。后面会出文章介绍uploadify这个插件。但是,有时候为了偷懒,直接就用input的file进行文件和图片等的上传,inputfile可以控制上传的格式,但是是html5,很多浏览器不支持,请看我的文... 查看详情
控制上传图片大小
图片上传问题:上传到服务器的图片建议压缩一下,因为iphone拍出的照片比较大,如果直接上传无论是上传还是下载都比较慢而且费流量,体验不好.具体思路如下: 先调整分辨率,分辨率可以自己设定一个值,大于的就缩小到... 查看详情
如何调整文件大小
一、若您待上传的文档文件较大,可以将文档文件转换成图片格式上传即可;(如何将文档转换成图片格式?)二、若您待上传的图片文件较大,也可参考以下方法调整图片文件大小。具体操作方法如下(以Windows系统自带的画... 查看详情
前端文件上传获取文件大小获取图片宽高(代码片段)
...ileList)varreader=newFileReader();reader.onload=function(e)console.log(e)/*获取图片base64*/letsrc=e.target.result;img.src=src;img.onload=function(e)//console.log(e);/*获取图片blob*/varobjectURL=window.URL.createObjectURL(fileList[0]);console.log(‘objectURL‘,objectURL)//window.URL.revokeO... 查看详情
上传图片限制大小类型判断像素判断(代码片段)
在项目中经常用到input标签来上传文件,而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种,就需要对用户上传的文件进行验证,在HTML5中有一个新的属性:accept文件类型限制。但是通常我们会用javascript或jQuery... 查看详情
jquery:[1]实现图片上传并预览
jQuery:[1]实现图片上传并预览原理预览思路1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL;2.把对象URL赋值给实现写好的img标签的src属性File对象 File对象可以用来获取文件的信息,还可以用来读取这... 查看详情
百度上传控件webuploader如何限制图片尺寸大小
webuploader如何限制图片尺寸大小,低于配置的分辨率就不让上传可以通过mimeTypes判断图片类型,fileNumLimit:xx,//上传数量限制,fileSizeLimit:xx,//限制上传所有文件大小,fileSingleSizeLimit:xx,//限制上传单个文件大小accept: // 只允... 查看详情
微信小程序图片压缩
...1.通过wx.chooseImage接口选择相机图片2.通过wx.getImageInfo接口获取图片信息(长宽,类型)3.计算压缩比例和最终图片的长宽5.通过wx.canvasToTempFilePath接口将画布内容导出为图片并获取图片路径wxml文件在文件末尾插入canvas组件,通过... 查看详情
图片上传组件开发(代码片段)
图片上传,作为web端一个常用的功能,在不同的项目中有不同的需求,在这里实现一个比价基本的上传图片插件,主要能实现图片的浏览,剪裁,上传这三个功能,同时也是为了让自己对图片/文件上传和HTML5中名声在外的canvas... 查看详情
音乐消息的回复
...增临时素材那个接口上传语音文件或者是视频文件就可以获取MediaId,但是要注意微信对语音文件或者是视频文件以及上节所说的图片文件做了大小的限制 直接在上一节的基础上修改媒体文件的类型为thumb,然后还是把D盘那张imo... 查看详情
4.k均值算法--应用
...,图片数据结构,线性化用kmeans对图片像素颜色进行聚类获取每个像素的颜色类别,每个类别的颜色压缩图片生成:以聚类中收替代原像素颜色,还原为二维观察压缩图片的文件大小,占内存大小答:读取一张图片并显示出这个... 查看详情
png文件大小如何压缩?
...&图片画面清晰质量不变,可以使用以下操作方法:1、获取工具“秒会压缩大师”,选择操作2、导入照片&图片进行操作。3、最后等待图片压缩完成。4、说明压缩模式:缩小优先(适合用于个人资料图片和缩率图)均衡压缩... 查看详情
图片上传组件开发(代码片段)
我就要自行车-需求整理放眼WWW,一般的图片上传模块,主要就是实现了三个功能,图片的预览,图片的剪裁及预览,图片的上传,那我也就整这么一个吧,再细化一下需求。图片的预览用户使用:用户点击“选择图片”,... 查看详情