图片上传并显示(兼容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. Android View的绘制机制流程深入详解(三)

    本系列文章主要着重深入介绍Android View的绘制机制及流程,第三篇主要介绍并分析视图状态以及重绘流程,首先剖析了 视图的几种状态,然后在深入分析视图的重绘机制流程. 真题园网:http://w ...

  2. Windows批处理(cmd/bat)常用命令小结

    转载自:“趣IT”微信公共号 前言 批处理文件(batch file)包含一系列 DOS命令,通常用于自动执行重复性任务.用户只需双击批处理文件便可执行任务,而无需重复输入相同指令.编写批处理文件非常 ...

  3. c语言—临界资源管理

    临界区管理的基本原则是: ①如果有若干进程要求进入空闲的临界区,一次仅允许一个进程进入.②任何时候,处于临界区内的进程不可多于一个.如已有进程进入自己的临界区,则其它所有试图进入临界区的进程必须等待. ...

  4. CentOS 简单命令

    一.启动级别 Linux系统设置系统启动模式的方式可以修改(必须要以root身份登录才能修改).修改系统启动模式的配置文件是   /etc/inittab. 我们在切换到root用户后,然后 vi / ...

  5. 关于JFace带复选框的树

    树的复选框用CheckboxTreeViewer实现.由于其子类ContainerCheckedTreeViewer在没有选择全部子节点时可以自动将父节点设置成灰选,所以实现树的复选框更多的是用Con ...

  6. Spark技术内幕:Stage划分及提交源码分析

    http://blog.csdn.net/anzhsoft/article/details/39859463 当触发一个RDD的action后,以count为例,调用关系如下: org.apache. ...

  7. GridView不換行

    在开发中用到了需要ScrollView嵌套GridView的情况,由于这两款控件都自带滚动条,当他们碰到一起的时候便会出问题,即GridView会显示不全. 解决办法,可以把ScrollVIew给删除 ...

  8. Android studio 删除Module、project

    很简单: 1 选中项目右键:Open Module Setting 2 选择要删除的项目,点击“-”即可

  9. SQLSERVER 数据库性能的基本

    很久没有写文章了,在系统正式上线之前,DBA一般都要测试一下服务器的性能 比如你有很多的服务器,有些做web服务器,有些做缓存服务器,有些做文件服务器,有些做数据库服务器 做数据库服务器的那台服务器性 ...

  10. Google Map JavaScript API V3 实例大全

    Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...