图片上传并显示(兼容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 ...
随机推荐
- mysql中的第三范式
※多表操作 (凡是多表,都要用到关联技术(把多表合并成一个新表): 左关联.右关联.内关联.还有一个外(全)关联,MySQL不支持,为考虑软件兼容,我们开发一般不用.) ※表与表之间的关系:1对1,1 ...
- GoF的23个经典设计模式
以文本和思维导图的方式简明扼要的介绍了GoF的23个经典设计模式,可当成学习设计模式的一个小手册,偶尔看一下,说不定会对大师的思想精髓有新的领悟. GoF(“四人帮”,又称Gang of Four,即 ...
- 3D Touch的简单使用
6s发布以后新增了一个3D touch功能,我个人觉得这个功能点在某些时候还是挺方便的,比如说微信的扫码功能. 直接长按图标就可以进入这个功能里面,不用再打开app.一层层查找了,比较方便. 其实这个 ...
- nodeValue和innerHTML的比较
<ul id="parent"> <li>1</li> <li>2</li> <li>3</li> ...
- JDK Tools - wsimport: 编译 WSDL 生成 JAX-WS 规范的 Java 类
wsimport 命令是用来编译 wsdl 生成JAX-WS 规范的 Java 类的工具. 命令格式 wsimport [ options ] wsdl 命令参数 -s directory 指定源文件 ...
- 【C#4.0图解教程】笔记(第9章~第18章)
第9章 语句 1.标签语句 ①.标签语句由一个标识符后面跟着一个冒号再跟着一条语句组成 ②.标签语句的执行完全如同标签不存在一样,并仅执行冒号后的语句. ③.给语句添加一个标签允许控制从代码的另一部分 ...
- Oracle、DB2、SQLSERVER、Mysql、Access分页SQL语句梳理
最近把平时在项目中常用到的数据库分页sql总结了下.大家可以贴出分页更高效的sql语句.sqlserver分页 第一种分页方法 需用到的参数: pageSize 每页显示多少条数据 pageNumbe ...
- iOS开发——极光推送
1.到极光官网 https://www.jpush.cn/ 下载极光推送SDK. 具体如何集成最好参考官网的文档,以及一些失败的原因.文档非常详细,我也是参考集成的. 2.到极光推送官网注册自己的应用 ...
- asp:保留两位小数:
<%=Formatnumber(-6665.8999,3,-1,-1,0)%>(6665.900)一个例子用到了函数Formatnumber()的所有参数:第一个参数(-6665.8999 ...
- android API文档查询---context、toast、SharedPreferences
/*查阅api ---context1.abstract AssetManager getAssets() Returns an AssetManager instance for the a ...