type="file"实现兼容IE8本地选择图片预览
一、HTML代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImagePage.aspx.cs" Inherits="Webs.pages.BookingNote.UploadImagePage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10"/>
<title>上传图片</title>
<script src="/content/common/js/isLogin.js?verson=<%=VersionNo %>" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/content/common/css/app.v2.css?verson=<%=VersionNo %>">
<link rel="stylesheet" type="text/css" href="/content/common/css/info.css?verson=<%=VersionNo %>">
<!--[if lt IE 9]> <script src="/content/common/js/ie/html5shiv.js?verson=<%=VersionNo %>" cache="false"></script> <script src="/content/common/js/ie/respond.min.js?verson=<%=VersionNo %>" cache="false"></script> <script src="/content/common/js/ie/excanvas.js?verson=<%=VersionNo %>" cache="false"></script> <![endif]-->
<style type="text/css">
.file-upload {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
opacity: 0;
filter: alpha(opacity=0);
} .previewBox {
margin: 15px 0;
} .previewBox img {
margin-right: 10px;
} .uploadBtn {
border: 1px solid #eee;
background: #fff;
color: #666;
font-size: 16px;
line-height: 1.6;
padding: 6px 6px;
}
</style>
<%=headAppendHtmlJavaScript() %>
</head>
<body>
<div style="width: 100%; height: auto; margin: auto">
<%--查询div--%>
<div id="show_fir" style="position: center;">
<p style="margin: 0px !important">
<span style="font-size: 18px; font-weight: bold;">图片类型</span>
<select name="SearchImageType" id="SearchImageType" class="form-control m-b" style="margin-left: 10px; display: inline-block; width: 75px;">
<option value="0">全部</option>
<option value="1">回执</option>
<option value="2">破损</option>
<option value="3">其他</option>
</select>
<input type="button" class="btn btn-s-md btn-success" value="查询" onclick="searchPhoto();" style="margin-left: 10px; vertical-align: top;" />
<input type="button" id="rovordUpload" class="btn btn-s-md btn-success" value="拍摄上传图片" onclick="shootingUpload();"style="float: right; margin-right: 30px;" />
<input type="button" class="btn btn-s-md btn-success" value="上传本地图片" onclick="showUpload();" style="float: right; margin-right: 30px;" /> </p> <hr style="background-color: lightgray; height: 2px; border: none; margin: 0px !important" />
<div class="xuanfucontent">
<ul id="ulli">
</ul>
</div>
</div>
<%--普通上传---%>
<div id="show_sed" style="display: none">
<div>
<div style="width: 5%; height: 200px; display: inline-block; float: left; position: relative">
<div style="position: absolute; top: 5px; left: 0;">
<img style="width: 40px; height: 40px;" src="/content/common/images/xh1.png" />
</div>
<div style="position: absolute; top: 80px; left: 0;">
<img style="width: 40px; height: 40px;" src="/content/common/images/xh2.png" />
</div>
<div style="position: absolute; top: 145px; left: 0;">
<img style="width: 40px; height: 40px;" src="/content/common/images/xh3.png" />
</div>
</div>
<div style="width: 25%; display: inline-block; border-right: 2px solid #e6e6e6;">
<div id="zhuangshi"></div>
<p style="font-size: 14px; font-weight: bold;">
<p style="color: #646464; font-weight: bold;">选择图片类型：</p>
<select name="dropImgType" id="dropImgType" class="form-control m-b" style="width: 260px;">
<option value="0">请选择</option>
<option value="1">回 执</option>
<option value="2">破 损</option>
<option value="3">其 他</option>
</select>
</p>
<%--普通上传--div--%>
<div class="file-box" id="jiazaidiv">
<p style="width: 243px; color: #646464; font-weight: bold;">选择图片文件：</p>
<div>
<input type="text" class="form-control" readonly="readonly" id="fileInput" name="fileInput" style="width:190px; padding-left:5px; float: left;" />
<div style="position: relative; display: inline-block; margin-left: 5px;">
<input type="button" class="btn btn-s-md btn-success" value="浏览图片" />
<input type="file" class="file-upload" name="file-upload" id="file-upload" />
</div>
</div>
</div>
<%--公共按钮事件--%>
<div style="margin-top: 15px;">
<input type="hidden" value="" id="pathimg" name="pathimg" />
<input type="hidden" value="" id="fileSize" name="fileSize" />
<input type="button" id="uploadBtn" class="btn btn-s-md btn-success" value="上传" />
<input type="button" class="btn btn-s-md btn-success" onclick="closeSed()" value="返回" />
</div>
</div>
<div id="photo" style="display: inline-block; width: 600px; height: 400px; position: absolute; top: -20px; left: 33%;">
<div class="previewBox" style="width: 100%; height: 100%;"></div>
</div>
</div>
</div>
</div>
<script src="/content/common/js/ajaxRequest.js?verson=<%=VersionNo %>" type="text/javascript"></script>
<script src="/content/common/js/pages.js?verson=<%=VersionNo %>" type="text/javascript"></script>
<script src="/content/common/js/cookie.js?verson=<%=VersionNo %>" type="text/javascript"></script>
<script src="/content/common/js/Storage.js?verson=<%=VersionNo %>" type="text/javascript"></script>
<script src="/content/common/js/upload/jfu/vendor/jquery.ui.widget.js"></script>
<script src="/content/common/js/upload/jfu/jquery.iframe-transport.js"></script>
<script src="/content/common/js/upload/jfu/jquery.fileupload.js"></script>
<%=bodyAppendHtmlJavaScript() %>
</body>
</html>
HTML代码
二、JS代码
<script type="text/javascript">
var bookNoteId, imageName, imageSize;
var jsonObject = {};
$(function () {
$("#show_sed").css("display", "none");
$("#show_fir").css("display", "block");
$("#uploadBtn").attr("disabled", true);
$("#file-upload").attr("accept", "image/gif,image/jpeg,image/jpg,image/x-png,image/x-ms-bmp,");
$(".previewBox").html("<img src='../../content/common/layer-v3.0.3/layer/skin/default/u825_03.jpg' width='200' height='200'");
bookNoteId = getUrlParam(location.search, "bookNoteId");
searchPhoto();
//浏览图片事件绑定
bindEvent();
if (typeof window.external.ShowPointEasyToBeatForm == 'undefined') {
$("#rovordUpload").css("display", "none");
}
});
//浏览图片事件绑定
function bindEvent() {
$(".previewBox").off(".choose,.upload");
}
//查询事件
function searchPhoto() {
jsonObject.bookNoteId = bookNoteId;
jsonObject.iamgeType = $("#SearchImageType").val();
jsonPost("/wsService/BookNoteImage/UploadImageHandler.ashx?type=QueryImageAway", jsonObject,
function (response) {
if (response.code == 0) {
document.getElementById("ulli").innerHTML = response.data == "" ? "暂无数据" : response.data;
} else {
alert(response.message);
document.getElementById("ulli").innerHTML = "暂无数据";
}
},
function () { }
);
}
//展示上传图片模块
function showUpload() {
$("#show_sed").css("display", "block");
$("#show_fir").css("display", "none");
$("#jiazaidiv").show();
$("#hs_Upload").hide();
}
//关闭上传图片模块
function closeSed() {
$("#show_sed").css("display", "none");
$("#show_fir").css("display", "block");
searchPhoto();
}
//上传
$("#file-upload").fileupload({
url: "/wsService/BookNoteImage/UploadImageHandler.ashx?type=UploadAliYun",
dataType: 'json',
fileInput: $("#file-upload"),
add: function (e, data) {
var file = data.files[0];
$("#fileInput").val(data.fileInput[0].value);
$("#uploadBtn").attr("disabled", false);
imageSize = file.size;
imageName = file.name;
operationImg(data.fileInput[0]);
$("#uploadBtn").unbind().bind('click', function () {
if ($("#dropImgType").val() == 0) {
showErrorAlert("请选择上传照片类型！");
return;
}
else if ($("#fileInput").val() === "") {
showErrorAlert("请选择图片！");;
return;
}
else if (!/.png$|.bmp$|.jpg$|.jpeg$|.gif$/.test(file.name)) {
showErrorAlert('请上传以png/bmp/jpg/jpeg/gif为扩展名的图片文件');
return;
}
else if (file.size >= 10485760) {//上传文件大小不能超过10Mb
showErrorAlert('上传的文件大小不能超过10Mb');
return;
} //showLoading();
$("#file-upload").fileupload({
formData: {
name: $("#fileInput").val()
}
});
console.log('before submit:' + $("#fileInput").val());
data.submit();
console.log("after submit");
});
},
done: function (e, rep) {
console.log("done");
var response = rep.result;
//var response = JSON.parse(rep.result);//后端返回字符串，解析成JSON对象，请求的content-type应该为text/plain,避免IE9下返回application/json提示下载，从而兼容IE9
//hideLoading();
$("#fileInput").val('');
if (response.code == 0) {
$("#pathimg").val(response.data);
saveDb();
} else {
showSuccessAlert("上传失败:" + response.message);
}
},
fail: function () {
console.log("fail");//没有打印，也就是说没回调fail
//hideLoading();
$("#fileInput").val('');
}
}); //删除单图事件
function delPhoto(imageId) {
if (confirm("是否删除此图片？")) {
jsonObject.deleteId = imageId;
jsonPost("/wsService/BookNoteImage/UploadImageHandler.ashx?type=DeleteImg", jsonObject,
function (response) {
if (response.code == "0") {
showSuccessAlert("删除图片成功！");
searchPhoto();
} else {
showErrorAlert("删除图片失败！");
}
},
function () { }
);
}
}
//查看原图
function lookPhoto(imageUrl) {
var option = {
id: 'test_dialog3',
html: "<div style='width:100%;height:100%;text-align:center'><image style='width:100%;height:100%;' src=http://" + imageUrl + "></image><div>",
title: '原图'
};
showDialog(option);
}
//图片入库
function saveDb() {
//开始上传
jsonObject.bookNoteCode = bookNoteId;
jsonObject.imgtype = $("#dropImgType").val();
jsonObject.fileSize = imageSize;
jsonObject.fileUrl = $("#pathimg").val();
jsonObject.FileName = imageName;
jsonPost("/wsService/BookNoteImage/UploadImageHandler.ashx?type=UpLoadImg", jsonObject,
function (response) {
if (response.code == "0") {
showSuccessAlert("上传图片成功！");
$("#fileInput").val("");
$("#pathimg").val("");
} else {
showErrorAlert("上传图片失败！");
$("#pathimg").val("");
$("#fileInput").val("");
}
},
function () { }
);
}
</script>
<script type="text/javascript">
//检查图片格式
function isImg(url) {
var result = /.+\.(jpg|png|jpeg|gif)$/.test(url);
if (!result) {
showErrorAlert("您选择的图片格式有误，请重新选择");
return false;
} else {
return true;
}
};
//添加预览图片到页面上
function addImgHtml(url) {
if ($(".previewBox")) {
$(".previewBox").html("<img src=" + url + " width='95%' height='95%' >");
}
};
//兼容IE处理
function previewImgIE(url) {
if (isImg(url)) {
var imgWrap = "<div class='imgWrap'></div>";
$(".previewBox").html($(imgWrap));
$(".imgWrap").css({
"width": '95%',
"height": '95%',
"display": "inline-block",
"margin-right": "10px",
"*display": "inline",
"*zoom": 1
});
$(".imgWrap:last").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src=\"" + url + "\")");
}
};
//正常处理
function previewImg(files) {
var file = files[0];
if (isImg(file.name)) {
var reader = new FileReader();
reader.onload = function (evt) {
addImgHtml(evt.target.result);
};
reader.readAsDataURL(file);
} else {
alert("您输入的图片格式有误，请重新输入!");
return false;
}
return true;
} //浏览图片操作；
function operationImg(fileInput) {
var isIE9OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
isIE9OrEarlier = isIE9OrEarlier && +isIE9OrEarlier[1] <= 9;
if (isIE9OrEarlier) {
//兼容IE
previewImgIE(fileInput.value);
} else {
//html5 files API
previewImg(fileInput.files);
}
};
</script>
</script>
JS代码
type="file"实现兼容IE8本地选择图片预览的更多相关文章
- 通过file文件选择图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- springmvc图片上传（兼容ie8以上，实时预览）
html代码: <form id="uploadform" method="post" enctype="multipart/form-data ...
- input[type=file]上传图片及转为base64码以及预览
<input type="file" id="imgurl" capture="camera" accept="image/ ...
- 自定义type为file型input控件+该控件具有本地图片预览功能
最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...
- js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成 ...
- Android从本地选择图片文件转为Bitmap，并用zxing解析Bitmap
如何从本地选择图片文件 使用Intent调用系统相册后,onActivityResult函数返回的是Uri格式的路径 /** * 打开系统相册 */ private void openSysAlbum ...
随机推荐
- canvas小球
小球碰撞效果是采用面向对象的方式写的,在小球的构造器里包含了小球的属性值,大小,移动速度,半径大小以及颜色. 在小球的原型方法里,添加了小球运动的方法,当小球碰撞到屏幕边界的时候进行反弹. 小球是 ...
- IntelliJ IDEA 2017.1.5迁移eclipse，SSM项目，通过jrebel实现热部署
1.首先打开idea,配置SVN版本控制器的路径 2.配置maven 3.配置jrebel热部署的路径 4.从svn到出项目 5.配置配置tomacat参数-server -XX:PermSize=1 ...
- GO语言初探
1.GO使用UTF-8编码,纯Unicode文本编写. 2.$ go verson (windows) 3.windows下,需要设置go语言的环境变量,新建一个名为 GOROOT的变量,指向go的具 ...
- 关于html表单的disabled属性的设置问题
首先,我的看法是无论disable的值是否有值,只要设置了disabled属性的表单,无论是否有值,无论值为什么,都会被禁用. 来看下面例子: 在一个群里有人说因为直接写在表单属性上是字符串,因为 ...
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- Nginx配置文件nginx.conf中文详解(转）
#定义Nginx运行的用户和用户组user www www; #nginx进程数,建议设置为等于CPU总核心数.worker_processes 8; #全局错误日志定义类型,[ debug | in ...
- 理解JAVA内存模型
实际上java内存模型是如上图所示一样 每个线程有自己的栈内存,存放共享对象的副本,本地变量 每个线程自己的本地变量是不可见的,但是共享对象对每个线程都是可见的. 如果想实现线程通信的话, 线程对共享 ...
- 微信公众平台开发，API接入与推送事件（1）
博客好久没有更新了,今天说说微信开发.微信开发的好多初学者都会又这样的迷惑,微信开发到底是什么?其实微信开发本质我和我们的网站开发没有太大的区别.我们常说的微信开发也就是公众号开,微信公众号分为三个类 ...
- java 5并发中的阻塞队列ArrayBlockingQueue的使用以及案例实现
演示一个阻塞队列的使用 public class BlockingQueueTest { public static void main(String[] args) { //创建一个包含三个元素的阻 ...
- Java基础学习笔记一 Java介绍
java语言概述 Java是sun公司开发的一门编程语言,目前被Oracle公司收购,编程语言就是用来编写软件的. Java的应用 开发QQ.迅雷程序(桌面应用软件) 淘宝.京东(互联网应用软件) 安 ...