上传图片实时显示 兼容 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" ο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相关推荐
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
- ajax上传图片成功但不显示,jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)...
参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...
- 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条
不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...
- javascript实现图片上传实时显示上传图片
我们平时会用到图片上传要求上传的图片要实时显示,那么下面就是我的方法 HTML代码如下 <input type="file" name="file" on ...
- thinkPHP利用ajax异步上传图片并显示、删除
近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...
- axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
- 双11特刊|购物车实时显示到手价,看云原生内存数据库Tair如何提升用户体验?
阿里云自研内存数据库Tair诞生于2009年,是一种支持高并发低延迟访问的云原生内存数据库,完全兼容Redis,已历经多年双11大促考验,提供核心在线访问加速能力,显著提升系统吞吐量. 作为双11大促 ...
- vue中使用axios post上传头像/图片并实时显示到页面
前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto&qu ...
- VUE项目兼容IE11 遇见的问题 SyntaxError: strict 模式下不允许一个属性有多个定义;ie11下载excel文件需要用navigator.msSaveBlob
最近要把vue项目兼容ie11 前面引入bable等一系列操作就不说了,下面说一下具体具体的问题 1 如图所示 SyntaxError: strict 模式下不允许一个属性有多个定义, 点击sta ...
最新文章
- 安装laravel5.1项目命令
- php中如何固定表格宽度,实例讲解DataTables固定表格宽度(设置横向滚动条)
- 曹大带我学 Go(6)—— 技术之外
- 多方法调用 一个出错 集体回滚_一个@Transaction哪里来这么多坑?
- HTML5移动端跨平台应用开发框架解析
- 80% 的学校还在给新生上 C 语言,它们 OUT 了吗?
- ant使用ftp上传数据时配置的一个报错问题
- 如何手动释放linux内存的方法,centos手动释放内存的方法
- python绘制小猪佩奇
- 更新pip下载jupyter lab
- 技术总监和CTO的区别 浅谈CTO的作用----软件公司如何开源节流
- 我所理解的CPU中断
- 疯狂的订餐系统-软件需求分析挑战之旅 【转】
- 鹿晗公布恋情致微博宕机;微信发布国庆长假数据报告;三星宣布将销售翻新版Note 7 丨价值早报
- ES DSL搜索 - prefix、fuzzy和wildcard
- 编程辅助工具推荐:图片工具snipaste
- 2020/09/29 鼠标移入 显示二维码或图片 移出隐藏
- 2018年5月下6月初 IT 技术类 招聘应聘情况.
- 【ppt制作软件】Focusky教程 | 如何删除单元格?
- Java 学习笔记(导航目录)
热门文章
- ACM Fellow发文抨击【同行评审】作弊轻松中顶会
- 神奇!大神利用AI修复古董纪录片,还原1920年的京城生活
- linus开启snmp_【snmp】Linux开启snmp及查询
- sumif三个条件怎么填_Excel根据条件进行求和的几个常用函数公式!
- linux tar 命令使用
- cmd控制远程电脑运行程序_电脑远程控制怎么,远程桌面开启教程
- 2021年下半年系统集成项目管理工程师案例分析真题及答案解析
- 漏洞payload 靶机_学生会私房菜【20200707期】Wordpress 4.6 任意命令执行漏洞
- ubuntu 自动挂载工具_Ubuntu设置开机自动挂载所有格式硬盘分区
- WordPress疑难问题以及解决方案汇总