不改安全级别,上传前,在客户端判断图片文件大小

安全|客户端|上传

很早前收集的TIPS,最近在项目中用到了,可能会对大家有所帮助。

<!--摘自51js-->

<script>
var img=null;
function s()
{
if(img)img.removeNode(true);
img=document.createElement("img");
img.style.position="absolute";
img.style.visibility="hidden";
img.width = 0;
img.height = 0;
img.attachEvent("onreadystatechange",orsc);
img.attachEvent("onerror",oe);
document.body.insertAdjacentElement("beforeend",img);
img.src=inp.value;
}
function oe()
{
alert("cant load img");
}
function orsc()
{
if(img.readyState!="complete")return false;
alert("图片大小:"+img.offsetWidth+"X"+img.offsetHeight);
alert("图片尺寸:"+img.fileSize);
btn.disabled=false;
}
</script>
<input id=inp type="file">
<br>
<button >Test</button><button id=btn disabled>UpLoad</button>
 
大家看到,其实也很简单,它先是在内存中定义了一个IMG对象,然后用此对象在客户端得到IMG对象的各种属性。

时间: 2025-01-21 12:28:34

不改安全级别,上传前,在客户端判断图片文件大小的相关文章

Javascript图片上传前的本地预览实例_javascript技巧

图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

Ajax上传图片及上传前先预览功能实例代码

手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下. 上传之前的预览 方式一 先来说说图片上传之前的预览问题.这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口.我们来看看实现方式: <!DOCT

PHP上传图片时判断上传文件是否为可用图片的方法_php技巧

本文实例讲述了PHP上传图片时判断上传文件是否为可用图片的方法.分享给大家供大家参考,具体如下: 这里利用getimagesize函数: function isImage($filename) { $types = '.gif|.jpeg|.png|.bmp'; //定义检查的图片类型 if(file_exists($filename)) { $info = getimagesize($filename); $ext = image_type_to_extension($info['2']);

ASP.NET MVC图片上传前预览简单实现_实用技巧

本文实例为大家分享了图片上传前预览并获取图片文件名和图片字节大小的具体实现代码,供大家参考,具体内容如下 在控制器中创建一个Action: 在Views目录下对应的控制器名称下创建视图PreViewing: 上图中 标记1,引用jQuery类库.标记2,选择文件.标记3,预览图片.标记4,显示图片文件名和图片字节大小.标记5,是Javascript代码...... 本例预览: 以上就是本文的全部内容,希望对大家的学习有所帮助.

jQuery+HTML5实现图片上传前预览效果_jquery

本文实例讲述了jQuery+HTML5实现图片上传前预览效果.分享给大家供大家参考.具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-c

jquery实现图片上传前本地预览功能_jquery

本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*

在struts2的action中如何获得上传文件在客户端的路径?

问题描述 在struts2的action中如何获得上传文件在客户端的路径? 解决方案 解决方案二:ServletActionContext.getServletContext().getRealPath("/UploadImages")解决方案三:用js拿到值,然后放到隐藏域里

一次上传多张图片,并且上传前可以预览其缩略图 兼容IE7

问题描述 我想要一个,一次上传多张图片,并且上传前可以预览其缩略图兼容IE7的jquery插件 解决方案 解决方案二:js干不了这事,一般都是flush插件解决方案三:这需要插件.ActiveX.Silverlight.Flash都可以考虑.

javascript上传前图片预览代码

 代码如下 复制代码 <style type="text/css"> #newPreview {      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } .style1     {         width: 507px; } </style> </head> <script language="javascript&