上传图片实时显示 兼容 ie11

html:

<style type="text/css">
  .imgOnloadWrap{ width: 150px; height: 200px;}
  #img1{ width: 150px; height: 200px;}
</style>

<div class="imgOnloadWrap">

  <img id="img1" name="fileimage"  src="<c:url value=‘/${bean.fileUrl }‘ />" />

</div>

<input type="file" style="width:10px;" size="1" class="btn_add_pic" id="file" name="file" onchange="upImg(this)" />

js:

  

function upImg(obj){
  var $file = obj;

  注:这种方式ie11不兼容   var imgFile = obj.files[0];

  替换成:var fileObj = $file[0]; 
  var fileObj = $file[0];
  var windowURL = window.URL || window.webkitURL;
  var dataURL;
  var $img = $("#img1");
  if(fileObj && fileObj.files && fileObj.files[0]){
    dataURL = windowURL.createObjectURL(fileObj.files[0]);
    $img.attr(‘src‘,dataURL);
  }else{
    $(‘.imgOnloadWrap img‘).remove();
    var htmlStr = ‘‘;
    htmlStr += ‘<img id="img1" src=""/>‘;
    $(‘.imgOnloadWrap‘).append(htmlStr);
    dataURL = $file.value;
    var imgObj = document.getElementById("img1");
    imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
    imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

  }
}

原文地址:https://www.cnblogs.com/jiaobaobao/p/8875235.html

时间: 2024-10-08 03:49:08

上传图片实时显示 兼容 ie11的相关文章

jsp上传图片实时显示

jsp代码 <div class="form-group" id="caseIma"> <label class="control-label">案例图片</label> <label class="btn btn-primary">选择图片 <input type="file" style="display: none" class

基于Jquery插件Uploadify实现实时显示进度条上传图片

网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考一下 先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支

thinkPHP利用ajax异步上传图片并显示、删除

近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题. 表单文件form: <form method="post" enctype="multipart/form-data"> <div style="margin: 20px 20px 20px 10px;"

vue中使用axios post上传头像/图片并实时显示到页面

前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&qu

实时显示iOS编写UI代码效果

编写iOS应用UI的方式大概有两种,一种是Storyboard/Xib,另一种是手写代码.采用Storyboard/Xib方式组织UI,由于提供可视化的特性,只要从UI库中拖动UI控件,便可以显示结果,极大地提高开发速度.但面临一个问题就是多人协作开发,由于所有的UI都放在同一个Storyboard文件中,使用Git/SVN合并代码就会出现冲突.多人协作开发还不是主要问题,有人提出可以创建多个Storyboard来分开UI编写,而Storyboard/Xib最主要问题是代码复用性比较差.所以有些

MVC无刷新上传图片并显示

@{ ViewBag.Title = "Home Page"; } <script src="../../Scripts/swfobject.js" type="text/javascript"></script> <script src="../../Scripts/jquery.uploadify.v2.1.4.js" type="text/javascript">&

ruby on rails 网页上如何实时显示服务器网速?

要在网页上实时显示网速,需要实时请求服务器(由于许多浏览器不支持web socket,这里还是用ajax轮询的方式),这里的服务器以centos为例,使用sysstat,不同的服务器,可能需要不同的软件支持. 一.centos里安装sysstat yum  install sysstat 安装完成后,使用sar -V查看 二.sar的使用 首先使用ifconfig查看使用的网上,确认一个要查看的网卡的名称,这里我使用的是eth0 然后使用sar获取网速: sar -n DEV 1 1 | gre

实时显示系统时间

1.概述 在浏览很多网站时,都会发现在网站中加入了显示当前系统时间的功能,在网页中显示当前系统时间,不仅可以方便浏览者掌握当前时间,而且还美化了网页. 2.技术要点 利用Date对象来实现.首先创建一个表示当前系统时间的Date()对象,然后通过Date对象的getXxx()方法获得当前系统时间的年.月.日.小时.分.秒和星期的值,接下来将获得的这些值组合成一个日期时间字符串,并将日期时间字符串设置成为<div>标签的内容,最后通过window对象的setTimeout()函数每隔1秒调用一个

运维开发:python websocket网页实时显示远程服务器日志信息

功能:用websocket技术,在运维工具的浏览器上实时显示远程服务器上的日志信息 一般我们在运维工具部署环境的时候,需要实时展现部署过程中的信息,或者在浏览器中实时显示程序日志给开发人员看.你还在用ajax每隔段时间去获取服务器日志?out了,试试用websocket方式吧 我用bottle框架,写了个websocket服务端,浏览器连接到websocket server,再用python subprocess获取远程服务器的日志信息,subprocess,就是用Popen调用shell的sh