图片上传并显示(兼容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),图片大小判断的更多相关文章

  1. 图片上传即时显示javascript代码

    这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...

  2. ruby on rails爬坑(三):图片上传及显示

    一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...

  3. struts中用kindeditor实现的图片上传并且显示在页面上

    做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...

  4. ueditor图片上传和显示问题

    图片上传: 这段是contorller代码 @RequestMapping(value = "/uploadImg", method = RequestMethod.POST) @ ...

  5. MVC图片上传并显示缩略图

    前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...

  6. django 图片上传与显示

    由于图片上传的需要,学习了一波上传 1. 上传 前端代码 <form action="写上相应的定向位置" method="post" enctype=& ...

  7. 图片上传和显示——上传图片——上传文件)==ZJ

    http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...

  8. 安卓自定义View实现图片上传进度显示(仿QQ)

    首先看下我们想要实现的效果如下图(qq聊天中发送图片时的效果): 再看下图我们实现的效果: 实现原理很简单,首先我们上传图片时需要一个进度值progress,这个不管是自己写的上传的方法还是使用第三方 ...

  9. 【Jersey】图片上传及显示

    一.前期准备 图片上传需要用到的一些依赖: <dependency> <groupId>org.jvnet.mimepull</groupId> <artif ...

随机推荐

  1. Google(谷歌)中国工程研究院 工程师 方坤 对学生朋友的一些建议

    对学生朋友的一点建议 发表者:Google(谷歌)中国工程研究院工程师 方坤 自去年春天加入谷歌,我曾多次随公司校园招聘团队一起走访各地院校,帮助公司发掘人才 .利用这样的出差机会到处走走看看,饱览祖 ...

  2. IOS中如何显示带有html标签的富文本

    NSString *strHTML = @"<p>你好</p><p>        这是一个例子,请显示</p><p>外加一个ta ...

  3. 将CGPoint、CGSize、CGRect等放进数组的方法

    在oc中,数组中只能存放NSObject类型的数据,所以如果将CGPoint.CGSize.CGRect这些数据存到数组中,我们需要将他们转换为对象类型才可以, 可以借助NSValue,它是用来将基本 ...

  4. VSPackge插件系列:如何正确获取DTE

    做VS插件开发,不得不了解DTE,有了DTE我们就可以与VS交互了,比如说获取当前选择的文件,比如说获取当前主窗口,比如说获取编译器等等,关于DTE接口更多的说明我把接口地址贴出来方便大家查阅. ht ...

  5. 关于Eclipse开发插件(三)

    视图之间实现事件监听 两个视图中的组件之间的互动,在开发插件的时候是经常碰到的问题.点击视图1列表的某项时,视图2的文本框显示相应的字符. 第一种主动式: 主动式就是在视图1的代码块中获取对视图2的对 ...

  6. css3过度和动画

    一.过度(transition) transition:[transition-property] || [transition-duration] || [transition-timing-fun ...

  7. db.class的实现类

    单例类,能操作数据库,能拼接sql语句,能写入日志 <?php class mysql extends db{ private static $ins=null; private $conn=n ...

  8. 大数据架构:flume-ng+Kafka+Storm+HDFS 实时系统组合

    http://www.aboutyun.com/thread-6855-1-1.html 个人观点:大数据我们都知道hadoop,但并不都是hadoop.我们该如何构建大数据库项目.对于离线处理,ha ...

  9. 20160526-20160531mybatis入门进阶

    mybatis第二天  高级映射 查询缓存 和spring整合 课程复习: mybatis是什么? mybatis是一人持久层框架,mybatis是一个不完全的ORM框架.sql语句需要程序员自己去编 ...

  10. Asp.Net Cookie的清除

    背景 最近做到一个asp.net项目,项目中保存用户信息用到了cookie,因此,在注销身份的时候,就需要清除掉cookie. 探索过程 我先是试验了这种代码,在没有特殊声明前,代码都是写在Page_ ...