图片上传并显示(兼容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. SpringMVC Controller详解

    SpringMVC Controller 介绍 一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理 ...

  2. nativescript环境搭建

    参考官网 http://docs.nativescript.org/setup/ns-cli-setup/ns-setup-win.html

  3. Ubuntu 14.04 & ant: Unable to locate tools.jar. Expected to find it in /usr/lib/jvm/java-7-openjdk-i386/lib/tools.jar

    当我在vagrant + ubuntu 14.04,jenkins ant执行项目的build.xml时,提示: [workspace] $ ant -file build.xml Unable to ...

  4. HTTPS协议学习总结

    目录 一:什么是HTTPS协议?二:客户端与服务端如何建立HTTPS协议连接?三:证书.加密协议.信息摘要.签名算法概念解释与关系梳理四:低版本操作系统作为客户端发送HTTPS失败分析五:参考资料   ...

  5. spring beans的写入工具——spring-beans-writer

    spring-beans-writer是我曾经为动态生成spring beans配置文件做的一个写入工具,托管地址: https://github.com/bluejoe2008/spring-bea ...

  6. 转:『代码』JS封装 Ajax级联下拉列表

    在博客园看到一篇不错的AJAX级联下拉列表,觉得不错,特地拿下来 :转载来自:『大雪无痕』 ,原文地址 //当一个 下拉列表 改变时,触发所有联动:(警告:各下拉列表之间 请不要出现 循环依赖) // ...

  7. 页面动态加载js文件

    function loadJS(url, onload) { var domscript = document.createElement('script'); domscript.src = url ...

  8. selenium简单代码入门

    #!/usr/bin/env python #-*- coding:utf-8 -*- import os,sys,string import time import unittest from se ...

  9. 【html】【14】特效篇--侧边栏客服

    实例参考: http://sc.chinaz.com/tag_jiaoben/zaixiankefu.html 代码: css @charset "utf-8"; ;;list-s ...

  10. springmvc学习(一)helloworld实例

    今天介绍的是springmvc的学习,越来越多的企业开始选择springmvc+mybatis来构建系统架构,在电商热门的今天,springmvc+mybatis已成为电商项目架构的很好搭配.Spri ...