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" οnchange="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;

  }
}

java:

//上传文件
private File file;
//上传文件名
private String fileFileName;
//上传文件内容类型
private String fileContentType;
//上传文件存放路径
private final static String UPLOADDIR = "/common/uploadEmpImage";

/**
* 上传照片
* @param file
* @param fileFileName
* @return
* @throws IOException
*/
public String saveImage(File file,String fileFileName) throws IOException{
  Date day=new Date();
  SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
  InputStream in = new FileInputStream(file);
  String dir = Struts2Util.getRequest().getRealPath(UPLOADDIR);
  File fileLocation = new File(dir);
  //此处也可以在应用根目录手动建立目标上传目录
  if(!fileLocation.exists()){
    boolean isCreated = fileLocation.mkdir();
    if(!isCreated) {
      //目标上传目录创建失败,可做其他处理,例如抛出自定义异常等,一般应该不会出现这种情况。
      return "";
    }
  }
  String Name=this.getFileFileName();
  String fileName=df.format(day)+"-"+this.getRandomString(5)+"-"+Name;
  File uploadFile = new File(dir, fileName);
  OutputStream out = new FileOutputStream(uploadFile);
  byte[] buffer = new byte[1024 * 1024];
  int length;
  try {
    while ((length = in.read(buffer)) > 0) {
      out.write(buffer, 0, length);
    }
  } catch (Exception e) {
    e.printStackTrace();
  }
  in.close();
  out.close();
  fileFileName=UPLOADDIR+"\\"+fileName;
  return fileFileName;
}

//随机获取

public static String getRandomString(int length){
  String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  Random random=new Random();
  StringBuffer sb=new StringBuffer();
  for(int i=0;i<length;i++){
    int number=random.nextInt(62);
    sb.append(str.charAt(number));
  }
  return sb.toString();
}

//删除上传的图片

public Boolean doDelImage(String fileUrl){
  boolean check=false;
  File delfile=new File(Struts2Util.getRequest().getRealPath("/")+fileUrl);
  if(delfile!=null){
    check=delfile.delete();
  }
  return check;
}

==============================================多图片上传=====================================================================

package com.cpsec.tang.chemical.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;

/**
* 多文件上传
*/
public class FilesUploadAction extends ActionSupport {
//上传文件存放路径
private final static String UPLOADDIR = "/upload";
//上传文件集合
private List<File> file;
//上传文件名集合
private List<String> fileFileName;
//上传文件内容类型集合
private List<String> fileContentType;

public List<File> getFile() {
return file;
}

public void setFile(List<File> file) {
this.file = file;
}

public List<String> getFileFileName() {
return fileFileName;
}

public void setFileFileName(List<String> fileFileName) {
this.fileFileName = fileFileName;
}

public List<String> getFileContentType() {
return fileContentType;
}

public void setFileContentType(List<String> fileContentType) {
this.fileContentType = fileContentType;
}

public String uploadform() throws Exception {
HttpServletRequest request = ServletActionContext.getRequest();
String webpath=null;//上传路径
for (int i = 0; i < file.size(); i++) {
//循环上传每个文件
uploadFile(i);
webpath="upload/"+this.getFileFileName().get(i);
}
return "SUCCESS";
}

//执行上传功能
private String uploadFile(int i) throws FileNotFoundException, IOException {
try {

InputStream in = new FileInputStream(file.get(i));
String dir = ServletActionContext.getRequest().getRealPath(UPLOADDIR);
File fileLocation = new File(dir);
//此处也可以在应用根目录手动建立目标上传目录
if(!fileLocation.exists()){
boolean isCreated = fileLocation.mkdir();
if(!isCreated) {
//目标上传目录创建失败,可做其他处理,例如抛出自定义异常等,一般应该不会出现这种情况。
return null;
}
}
String fileName=this.getFileFileName().get(i);
File uploadFile = new File(dir, fileName);
OutputStream out = new FileOutputStream(uploadFile);
byte[] buffer = new byte[1024 * 1024];
int length;
while ((length = in.read(buffer)) > 0) {
out.write(buffer, 0, length);
}
in.close();
out.close();
return uploadFile.toString();
} catch (FileNotFoundException ex) {
return null;
} catch (IOException ex) {
return null;
}
}
}

转载于:https://www.cnblogs.com/jiaobaobao/p/8875235.html

上传图片实时显示 兼容 ie11相关推荐

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

    网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...

  2. ajax上传图片成功但不显示,jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)...

    参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...

  3. 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条

    不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...

  4. javascript实现图片上传实时显示上传图片

    我们平时会用到图片上传要求上传的图片要实时显示,那么下面就是我的方法 HTML代码如下 <input type="file" name="file" on ...

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

    近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...

  6. axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...

  7. 双11特刊|购物车实时显示到手价,看云原生内存数据库Tair如何提升用户体验?

    阿里云自研内存数据库Tair诞生于2009年,是一种支持高并发低延迟访问的云原生内存数据库,完全兼容Redis,已历经多年双11大促考验,提供核心在线访问加速能力,显著提升系统吞吐量. 作为双11大促 ...

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

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

  9. VUE项目兼容IE11 遇见的问题 SyntaxError: strict 模式下不允许一个属性有多个定义;ie11下载excel文件需要用navigator.msSaveBlob

    最近要把vue项目兼容ie11 前面引入bable等一系列操作就不说了,下面说一下具体具体的问题 1  如图所示  SyntaxError: strict 模式下不允许一个属性有多个定义, 点击sta ...

最新文章

  1. 安装laravel5.1项目命令
  2. php中如何固定表格宽度,实例讲解DataTables固定表格宽度(设置横向滚动条)
  3. 曹大带我学 Go(6)—— 技术之外
  4. 多方法调用 一个出错 集体回滚_一个@Transaction哪里来这么多坑?
  5. HTML5移动端跨平台应用开发框架解析
  6. 80% 的学校还在给新生上 C 语言,它们 OUT 了吗?
  7. ant使用ftp上传数据时配置的一个报错问题
  8. 如何手动释放linux内存的方法,centos手动释放内存的方法
  9. python绘制小猪佩奇
  10. 更新pip下载jupyter lab
  11. 技术总监和CTO的区别 浅谈CTO的作用----软件公司如何开源节流
  12. 我所理解的CPU中断
  13. 疯狂的订餐系统-软件需求分析挑战之旅 【转】
  14. 鹿晗公布恋情致微博宕机;微信发布国庆长假数据报告;三星宣布将销售翻新版Note 7 丨价值早报
  15. ES DSL搜索 - prefix、fuzzy和wildcard
  16. 编程辅助工具推荐:图片工具snipaste
  17. 2020/09/29 鼠标移入 显示二维码或图片 移出隐藏
  18. 2018年5月下6月初 IT 技术类 招聘应聘情况.
  19. 【ppt制作软件】Focusky教程 | 如何删除单元格?
  20. Java 学习笔记(导航目录)

热门文章

  1. ACM Fellow发文抨击【同行评审】作弊轻松中顶会
  2. 神奇!大神利用AI修复古董纪录片,还原1920年的京城生活
  3. linus开启snmp_【snmp】Linux开启snmp及查询
  4. sumif三个条件怎么填_Excel根据条件进行求和的几个常用函数公式!
  5. linux tar 命令使用
  6. cmd控制远程电脑运行程序_电脑远程控制怎么,远程桌面开启教程
  7. 2021年下半年系统集成项目管理工程师案例分析真题及答案解析
  8. 漏洞payload 靶机_学生会私房菜【20200707期】Wordpress 4.6 任意命令执行漏洞
  9. ubuntu 自动挂载工具_Ubuntu设置开机自动挂载所有格式硬盘分区
  10. WordPress疑难问题以及解决方案汇总