一、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代码