<%@page import="tms.dto.LoginProfile"%>
<%@page language="java" contentType="text/html; charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="webTag" uri="/smartweb-tags"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport"
content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>上传照片 </title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.id_img_wp {
width: 94%;
margin: 0 auto;
min-height: 30px;
}
.cancel {
width: 50px;
height: 50px;
color: #989898;
position: absolute;
}
.save_btn {
margin: 20px auto;
border: none;
height: 40px;
width: 95%;
background: #ce1b1b !important;
border-radius: 3px !important;
font-family: "微软雅黑";
font-size: 16px;
color: white;
line-height: 40px;
}
.more_btn {
height: 140px;
width: 100px;
background: green;
border-radius: 3px !important;
font-family: "微软雅黑";
font-size: 16px;
color: white;
}
.info_list {
width: 100%;
height: 50px;
border-bottom: 1px solid #F2F2F2;
}
.list_left {
width: 27%;
margin-left: 3%;
height: 50px;
font-family: "微软雅黑";
font-size: 16px;
color: #636363;
line-height: 50px;
float: left;
}
.list_left2 {
width: 97%;
margin-left: 3%;
height: 50px;
font-family: "微软雅黑";
font-size: 16px;
color: #636363;
line-height: 50px;
float: left;
}
.list_left2 span {
color: #A04E52;
font-size: 12px;
margin-left: 5px;
}
.list_right {
width: 65%;
margin-right: 3%;
height: 50px;
color: #636363;
line-height: 50px;
float: right;
}
.edit {
width: 100%;
height: 50px;
color: #898989;
font-family: "微软雅黑";
font-size: 16px;
border: none;
}
.img_wp img {
width: 100%;
height: 100%;
}
.img_intro {
color: #383838;
text-align: center;
font-family: "微软雅黑";
padding: 10px 0 10px 0;
}
.img_wp {
width: 40%;
margin: 0 5% 0 5%;
float: left;
cursor: pointer;
}
</style>
<script src="app/js/jquery.min.js"></script>
<script type="text/javascript" src="app/js/jquery.form.js"></script>
</head>
<body>
<div class="head1">
<form action="updWaybillImage.htm" method="post" id="updWaybillForm" enctype="multipart/form-data">
<div class="info_list" style="border-bottom: none;">
<div class="list_left2">
单号:<span><input type="text" name="waybillNo" id="waybillNo" style="width: auto;height: 30px;" value="<s:property value="#request['waybillNo']"/>"></span>
</div>
<div class="list_left2">
照片上传<span>(请保持图片清晰)</span>
</div>
</div>
<div id="img_div">
<div class="id_img_wp" style="float: left">
<input type="file" style="display: none" id="upLoad0" name="orderFile" />
<div class="img_wp" onclick="importImage(0)">
<img src="app/img/up.png" id="preview0" />
<p class="img_intro" id="img0">请选择图片</p>
</div>
<div style="padding-top: 20px;">
<a href="#" class="more_btn" plain="true" id="addDivBtn">更多</a>
</div>
</div>
</div>
<p style="text-align: center;">
<input type="button" value="确认上传" accept="image/*" class="save_btn" id="saveBtn"/>
</p>
</form>
<script>
var n= 0;
$(function() {
$('.img_wp img').height($('.img_wp img').width() * 0.6);
$(window).resize(function() {
$('.img_wp img').height($('.img_wp img').width() * 0.6);
});
});
function directTurnIntoBase64(fileObj,callback){
var r = new FileReader();
r.onload = function(){
imgBase64 = r.result;
callback(imgBase64);
};
r.readAsDataURL(fileObj);
}
function compress(fileObj, callback) {
if ( typeof (FileReader) === 'undefined') {
directTurnIntoBase64(fileObj,callback);
} else {
try {
var reader = new FileReader();
reader.onload = function (e) {
var image = $('<img/>');
image.load(function(){
square = 700,
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = 0,
imageHeight = 0,
offsetX = 0,
offsetY = 0,
data = '';
canvas.width = square;
canvas.height = square;
context.clearRect(0, 0, square, square);
if (this.width > this.height) {
imageWidth = Math.round(square * this.width / this.height);
imageHeight = square;
offsetX = - Math.round((imageWidth - square) / 2);
} else {
imageHeight = Math.round(square * this.height / this.width);
imageWidth = square;
offsetY = - Math.round((imageHeight - square) / 2);
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
var data = canvas.toDataURL('image/jpeg');
callback(data);
});
image.attr('src', e.target.result);
};
reader.readAsDataURL(fileObj);
}catch(e){
directTurnIntoBase64(fileObj,callback);
}
}
}
function importImage(n){
$('#upLoad'+n).click();
}
$("#upLoad0").on('change',function(){
var filePath = $(this).val(),
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
imgBase64 = '',
fileObj = document.getElementById('upLoad0').files[0];
// 检查是否是图片
if(fileFormat == ""){
return;
}
if( !fileFormat.match(/.png|.jpg|.jpeg/)) {
alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}
document.getElementById("img0").innerHTML="导入中，请稍后...";
// 调用函数，对图片进行压缩
compress(fileObj,function(imgBase64){
imgBase64 = imgBase64;
$('#preview0').attr('src',imgBase64); //显示预览图片
document.getElementById("img0").innerHTML="导入完成";
});
});
$("#addDivBtn").click(function(){
n=n+1;
var div=$('<div class="id_img_wp" style="float: left" id="div_'+n+'">'
+'<input type="file" style="display: none" id="upLoad'+n+'" attr="' + n + '" name="orderFile" />'
+'<div class="img_wp" onclick="importImage('+n+')">'
+'<img src="app/img/up.png" id="preview'+n+'" />'
+'<p class="img_intro" id="img'+n+'">请选择图片</p>'
+'</div>'
+'<div style="padding-top: 20px;">'
+'<a href="#" class="more_btn" plain="true" onclick="deleteDiv('+n+')">移除</a>'
+'</div>'
+'</div>');
$("#img_div").append(div);
var tempN = $("#upLoad" + n).attr("attr");
$("#upLoad"+tempN).on('change',function(){
var filePath = $(this).val(),
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
imgBase64 = '',
fileObj = document.getElementById('upLoad'+tempN).files[0];
// 检查是否是图片
if(fileFormat == ""){
return;
}
if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}
document.getElementById("img"+tempN).innerHTML="导入中，请稍后...";
// 调用函数，对图片进行压缩
compress(fileObj,function(imgBase64){
imgBase64 = imgBase64;
$('#preview'+tempN).attr('src',imgBase64); //显示预览图片
document.getElementById("img"+tempN).innerHTML="导入完成";
});
});
});
$("#saveBtn").click(function(){
if ($('#waybillNo').val() == null || $('#waybillNo').val() == '') {
alert('请扫描或者输入运单号');
return false;
}
$("#updWaybillForm").submit();
});
$("#updWaybillForm").submit(function(){
var options = {
type: 'POST',
url: 'updWaybillImage.htm',
success:null,
dataType: 'json',
error : function(xhr, status, err) {
alert(xhr.responseText);
}
};
$(this).ajaxSubmit(options);
return false; //防止表单自动提交
});
function deleteDiv(n){
$("#div_"+n+"").remove();
}
</script>
</body>
</html>