<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>666</title>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul, ol {
list-style-type: none;
}
.clearfix:after, .clearfix:before {
display: table;
content: ' ';
}
.clearfix:after {
clear: both;
}
.tc {
text-align: center;
}
.select, .select_video {
height: 2rem;
line-height: 2rem;
background: #fff;
border: 1px solid #4285F4;
margin: 0.5rem 1rem;
position: relative;
}
.select label, .select_video label {
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 14px;
color: #333;
}
#upload, #upload_video {
display: none;
}
.preview, .video_preview {
margin: 0.5rem 1rem;
/*border:0px solid #bbb;*/
padding: 4px;
display: none;
}
.preview_img_list li {
float: left;
width: 25%;
padding: 2px 0;
}
.preview_img_list li img {
vertical-align: top;
max-width: 98%;
}
.btn {
background: #4285F4;
color: #fff;
height: 2.5rem;
line-height: 2.5rem;
margin: 2rem 1rem;
border-radius: 0.5rem;
}
</style>
</head>
<body>
<%--<h2 class = "tc">图片上传</h2>--%>
<%--<div style="bottom:15%;height: 40px;width: 40px;/*border:1px solid red;*/float: right;position: fixed;right: 24px;z-index:2" onclick="returnF()">返回首页</div>--%>
<div style="position: absolute; width: 100%; height: 100%; background-color: white;">
<form id="form1" name="form1" class="tc" action="">
<div style="margin-top: 10%; float: left; margin-left: 5%;"><span>真实姓名:</span><input style="margin-left: 20px; font-size: 17px; border: 0px solid; outline: none" name="name1" id="name1"></div>
<div style="margin-top: 10%; float: left; margin-left: 5%;"><span>联系方式:</span><input style="margin-left: 20px; font-size: 17px; border: 0px solid; outline: none" name="tel" id="tel"></div>
<textarea id="txtValue" name="txtValue" style="width: 90%; height: 80px; font-size: 14px; border: 0px; outline-style: none; margin-top: 15%;" placeholder="这一刻的想法..."></textarea>
<div class="select tc">
<label for="upload">图片上传及预览</label>
<input type="file" id="upload" name="upload" style="/* visibility: hidden */" accept="image/*" name="" value="">
</div>
<div class="preview">
<ul class="preview_img_list clearfix">
</ul>
</div>
<%-- <div class="select_video tc">
<label for="upload_video">视频上传及预览</label>
<input type="file" id = "upload_video" accpet = "video/*" capture = "camcorder">
</div>--%>
<div class="video_preview">
</div>
<div class="submit btn tc" onclick="up()">上传</div>
<div id="divK" style="display:none;height: 100%; width: 100%;text-align:center">
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<br/>
<span id="percentage"></span><span id="time"></span>
</div>
</form>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function returnF(rankType) {
location.href = "index.aspx";
}
$(function () {
//var formData
})
/**判断是否是手机号**/
function isPhoneNumber(tel) {
var reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
return reg.test(tel);
}
window.onload = function () {
var uploadBtn = document.querySelector('#upload');
var previewImgList = document.querySelector('.preview_img_list');
//var uploadVideo = document.querySelector('#upload_video');
var submitBtn = document.querySelector('.submit');
imgArr = new Array();
uploadBtn.addEventListener('change', function () {
var imgLen = this.files.length;
var liLen = previewImgList.getElementsByTagName('li').length;
var ImgLen = imgLen + liLen;
if (ImgLen > 9) {
swal("上传最大数量不能大于9");
return false;
}
document.querySelector(".preview").style.display = 'block';
for (var i = 0; i < imgLen; i++) {
var file = this.files[i];
var imgType = /^image\//;
if (!imgType.test(file.type)) {
continue;
}
var li = document.createElement('li');
var img = document.createElement("img");
li.appendChild(img);
previewImgList.appendChild(li);
var reader = new FileReader();
reader.onload = (
function (aImg) {
return function (e) {
aImg.src = e.target.result;
initHW();
imgArr.push(e.target.result);
};
}
)(img);
reader.readAsDataURL(file);
//img.addEventListener("dblclick", function () {
// debugger
// $(this).parent().remove();
//});
$(img).click(function () {
imgArr.splice($(this).parent().index(), 1);
$(this).parent().remove();
});
var objectUrl = window.URL.createObjectURL(file);
img.src = objectUrl;
}
}, false);
//submitBtn.addEventListener('click',function(){
// if(!imgArr.length){
// alert('请选择要上传的图片');
// return false;
// }
// var form = document.querySelector('form');
// var formData = new FormData(form);
// for (var i = 0; i < imgArr.length; i++) {
// formData.append('file'+ i.toString(), imgArr[i]);
// }
// var request = new XMLHttpRequest();
// request.open('post',"CPVoteHelper.ashx?action=upload");
// request.send(formData);
// request.onreadystatechange = function(){
// if(request.readyState === 4 && request.status === 200){
// location.href = "index.aspx";
// }
// }
//},false);
}
var request;
var isUp = false;
var isReturn;
function up() {
isReturn = false;
if (!isPhoneNumber($('#tel').val())) {
isReturn = true;
swal('请输入正确的手机号码!');
}
if (!isReturn && $('#name1').val() == "") {
isReturn = true;
swal('请输入姓名!');
}
if (isReturn)
return false;
if (isUp)
return false;
isUp = true;
if (!imgArr.length) {
swal('请选择要上传的图片');
return false;
}
var form = document.querySelector('form');
var formData = new FormData(form);
for (var i = 0; i < imgArr.length; i++) {
formData.append('file' + i.toString(), imgArr[i]);
}
request = new XMLHttpRequest();
request.open('post', "CPVoteHelper.ashx?action=upload", true);
request.onerror = uploadFailed; //请求失败
request.upload.onprogress = progressFunction;
request.upload.onloadstart = function () {//上传开始执行方法
ot = new Date().getTime(); //设置上传开始时间
oloaded = 0;//设置上传开始时,以上传的文件大小为0
$('#divK').show();
};
request.onload = uploadComplete;
//request.onreadystatechange = function () {
// if (request.readyState === 4 && request.status === 200) {
// location.href = "index.aspx";
// }
//}
try{
request.send(formData);
}
catch (ex) {
swal('图片解码失败,请刷新页面后重新上传!');
}
}
function uploadComplete() {
var data = request.responseText;
debugger
if (data == '-1' || data == '0')
swal('上传图片发生未知错误,请刷新后提交3M以下图片!');
else
location.href = "detail.aspx?id=" + data;
//location.href = "index.aspx";
}
// 初始化图片宽度
// 使得图片高度一致
function initHW() {
var previewImgList = document.querySelector('.preview_img_list');
var Lis = previewImgList.getElementsByTagName('li');
var LisLen = Lis.length;
if (LisLen > 1) {
var img = Lis[0].getElementsByTagName('img')[0];
var imgW = img.width;
var imgH = img.height;
for (var i = 1; i < LisLen; i++) {
var img = Lis[i].getElementsByTagName('img')[0];
img.style.width = imgW + 'px';
img.style.height = imgH + 'px';
}
}
}
function uploadFailed() {
$('#divK').hide();
swal("上传失败,请刷新后重试!");
}
var ot;//
var oloaded = 0;
function progressFunction(evt) {
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentage");
// event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0
if (evt.lengthComputable) {//
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
}
var time = document.getElementById("time");
var nt = new Date().getTime();//获取当前时间
var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差,单位为s
ot = new Date().getTime(); //重新赋值时间,用于下次计算
var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位b
oloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算
//上传速度计算
var speed = perload / pertime;//单位b/s
var bspeed = speed;
var units = 'b/s';//单位名称
if (speed / 1024 > 1) {
speed = speed / 1024;
units = 'k/s';
}
if (speed / 1024 > 1) {
speed = speed / 1024;
units = 'M/s';
}
speed = speed.toFixed(1);
//剩余时间
var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
time.innerHTML = ',速度:' + speed + units + ',剩余时间:' + resttime + 's';
if (bspeed == 0)
time.innerHTML = '上传已取消';
}
</script>