图片上传并显示(兼容ie),图片大小判断
图片上传并显示(兼容ie),图片大小判断
HTML
<div id="swf" style="margin: 0 auto;text-align: center;">
<img src="/assets/img/default.jpg" height="180px" width="180px"
id="logoshow">
</div>
<div id="headview" style="text-align: center;margin: 0 auto;">
<input type="file" id="logo" name="logo" style="width: 180px;"
onchange="previewImage(this)">
</div>
JS
function previewImage(file){
var div = document.getElementById('swf');
if (file.files && file.files[0]) {//HTML5
var img = document.getElementById('logoshow');
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function (evt) {
img.src = evt.target.result;
img.style.width= "180px";
};
}
else //兼容IE,滤镜
{
alert("filter");
var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
file.blur();
var src = document.selection.createRange().text;
var img = document.getElementById('logoshow');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
div.innerHTML = "<img id=logoshow style='margin:0px auto;width:180px;height:180px;" + sFilter + src + "\"'>";
}
}
JS判断文件大小
<input id="file" type="file" onchange="filefujianChange(document.getElementById('file'))">
<script type="text/javascript">
function filefujianChange(target) {
var fileSize = 0;
if (!target.files) {
var filePath = target.value;
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile (filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
alert(size);
if(size>2000){
alert("附件不能大于2M");
target.value="";
return
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
alert(fileName);
if(fileName !="jpg" && fileName !="jpeg" && fileName !="pdf" && fileName !="png" && fileName !="dwg" && fileName !="gif" ){
alert("请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)!");
target.value="";
return ;
}
}
</script>
图片上传并显示(兼容ie),图片大小判断的更多相关文章
- 图片上传即时显示javascript代码
这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...
- ruby on rails爬坑(三):图片上传及显示
一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...
- struts中用kindeditor实现的图片上传并且显示在页面上
做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...
- ueditor图片上传和显示问题
图片上传: 这段是contorller代码 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST) @ ...
- MVC图片上传并显示缩略图
前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...
- django 图片上传与显示
由于图片上传的需要,学习了一波上传 1. 上传 前端代码 <form action="写上相应的定向位置" method="post" enctype=& ...
- 图片上传和显示——上传图片——上传文件)==ZJ
http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...
- 安卓自定义View实现图片上传进度显示(仿QQ)
首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看下图我们实现的效果: 实现原理很简单,首先我们上传图片时需要一个进度值progress,这个不管是自己写的上传的方法还是使用第三方 ...
- 【Jersey】图片上传及显示
一.前期准备 图片上传需要用到的一些依赖: <dependency> <groupId>org.jvnet.mimepull</groupId> <artif ...
随机推荐
- centos中安装jdk方法
RPM安装方法一: 1.检验系统原版本[root@zck ~]# java -versionjava version "1.6.0_24"OpenJDK Runtime Envir ...
- java.util.regex.PatternSyntaxException: Unexpected internal error near index 1 \ ^
1 String a = "1991\12\16"; 2 String[] split = a.split("\\"); 3 System.out.printl ...
- [记录] javascript 对象中使用setTimeout
参考:Javascript对象中关于setTimeout和setInterval的this介绍 使用最后一个方法终于弄好了,简直了,在对象中使用setTimeout原来是这样的 做的是分钟倒计时,倒数 ...
- 【转】Monkeyrunner测试1——Monkeyrunner的使用
Monkeyrunner的使用 一.终端输入单行命令行实现 1. 开启android 模拟器 (1) 用Eclipse打开andorid的模拟器 (2) 在CMD中用andorid命令打开模拟器 定位 ...
- 【C语言】02-基本数据类型
跟其他语言一样,C语言中用变量来存储计算过程使用的值,任何变量都必须先定义类型再使用.为什么一定要先定义呢?因为变量的类型决定了变量占用的存储空间,所以定义变量类型,就是为了给该变量分配适当的存储空间 ...
- Maven POM.xml (转)
简介 pom.xml文件是Maven进行工作的主要配置文件.在这个文件中我们可以配置Maven项目的groupId.artifactId和version等Maven项目必须的元素:可以配置Maven项 ...
- 标签的innerHTML属性和html()
在新公司开发编码的时候,经常写js代码:有时候就需要往某个标签里添加一些html脚本或者要拿到某个标签里的html脚本,那么就会用到innerHTML和html. 1.innerHTML属性 w3sc ...
- android手机震动
Vibrator是安卓提供的震动器,其没有构造器,通过getSystemService(Context.VIBRATOR_SERVICE)方法获取对象.但使用此类时需要在清单文件中添加访问权限andr ...
- cookie管理中的一些细节,转的
1.domain表示的是cookie所在的域,默认为请求的地址,如网址为www.jb51.net/test/test.aspx,那么domain默认为www.jb51.net.而跨域访问,如域A为t1 ...
- ping 命令详解
Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说"ping一下某机器,看是不是开着".不能打开网页时会说"你先ping网关地址 ...