原生图片上传
首先看效果
上传之后在下面显示出来，并且点击放大缩小，旋转。
html代码
<div class="anniu_uplode8">
<span>上传图片 <input type="file" name="demo_input" class='fileu' accept="image/bmp,image/jpg,image/png,image/jpeg"/></span>
<p >图片不大于2M，格式支持JPG/PNG/JPEG/BMP。上传图片后，点击可放大</p>
</div>
<div id="imgBox">
<img id="imgsrc" src="" alt="">
</div>
<!--放大图片最笨的方法-->
<div class="moban2" id="dialog-bg2">
<span class="closeImg"><img src="../../shopping/img/upload/关闭.png" alt=""></span>
<div class="moban_img2" id="img-box2">
<img src="" />
</div>
<div class="bottom">
<ul>
<li><img id="suoxiao" src="../../shopping/img/upload/narrow.png" alt=""></li>
<li><img id="suoxiao2" src="../../shopping/img/upload/narrow.png" alt=""></li>
<li><img id="suoxiao3" src="../../shopping/img/upload/narrow.png" alt=""></li>
<li><img id="suoxiao4" src="../../shopping/img/upload/narrow.png" alt=""></li>
<li id="huanyuan">100%</li>
<li><img id="fangda" src="../../shopping/img/upload/enlarge.png" alt=""></li>
<li><img id="fangda2" src="../../shopping/img/upload/enlarge.png" alt=""></li>
<li><img id="fangda3" src="../../shopping/img/upload/enlarge.png" alt=""></li>
<li><img id="fangda4" src="../../shopping/img/upload/enlarge.png" alt=""></li>
<li><img id="xuanzhuan" src="../../shopping/img/upload/rotate.png" alt=""></li>
<li><img id="xuanzhuan2" src="../../shopping/img/upload/rotate.png" alt=""></li>
<li><img id="xuanzhuan3" src="../../shopping/img/upload/rotate.png" alt=""></li>
<li><img id="xuanzhuan4" src="../../shopping/img/upload/rotate.png" alt=""></li>
<!--<li><img src="../../shopping/img/upload/narrow.png" alt=""></li>-->
</ul>
</div>
</div>
js代码
var xhr;
var fmt1
var images
var formData;
var uploadcallback;
//上传图片
function bo_upload_complete(data) {
uploadcallback(data);
}
function bo_upload(file, callback) {
//时间格式处理
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
fmt1 =(file.lastModifiedDate).Format("yyyy/MM/dd HH:mm:ss")
//限制图片大小
var num = file.size/ 1024 /1024
if(num > 2) {
alert("上传图片不能大于2M!")
return
}
if (!window.FormData || !window.FileList) {
throw ('您的浏览器不支持ajax upload');
}
uploadcallback = callback;
if (xhr == null) {
xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
console.log(123);
}, false);
xhr.addEventListener("load", function (evt) {
console.log(evt.target.responseText);
var ret = eval('(' + evt.target.responseText + ')');
bo_upload_complete(ret);
}, false);
xhr.addEventListener("error", function (evt) {
console.log(12345);
alert("上传出错" + evt.toString());
}, false);
xhr.addEventListener("abort", function (evt) {
console.log(123456);
alert("用户取消上传");
}, false);
}
if (formData == null) {
formData = new FormData();
}
formData.append('demo_input', file);
// console.log(file)
xhr.open('POST', '/ajeasy/fdfs/uploading');
xhr.send(formData);
}
$('.fileu').change(function () {
bo_upload(this.files[0], function (data) {
// console.log(data)
if (data.err) {
return
} else {
images=data.data
var src =images
$(".guanlian8").css("height","620px")
$('#imgsrc').attr('src',src)
}
})
})
点击放大
//点击可放大
$("#imgsrc").click(function () {
$("#dialog_upload8").css("opacity",'0')
$("#dialog-bg2").show()
var imgs = $(this).attr("src")
$("#img-box2 img").attr("src",imgs)
})
//放大
$("#fangda").click(function(){
$(".moban_img2").css("transform","scale(1.3)")
$(this).hide()
$("#fangda2").show()
})
$("#fangda2").click(function(){
$(".moban_img2").css("transform","scale(1.6)")
$(this).hide()
$("#fangda3").show()
})
$("#fangda3").click(function(){
$(".moban_img2").css("transform","scale(2.2)")
$(this).hide()
$("#fangda4").show()
})
$("#fangda4").click(function(){
$(".moban_img2").css("transform","scale(2.5)")
$(this).hide()
$("#fangda").show()
})
//还原
$("#huanyuan").click(function () {
$(".moban_img2").css("transform","scale(1.0)")
})
//缩小
$("#suoxiao").click(function() {
$(".moban_img2").css("transform","scale(0.8)")
$(this).hide()
$("#suoxiao2").show()
})
$("#suoxiao2").click(function() {
$(".moban_img2").css("transform","scale(0.6)")
$(this).hide()
$("#suoxiao3").show()
})
$("#suoxiao3").click(function() {
$(".moban_img2").css("transform","scale(0.5)")
$(this).hide()
$("#suoxiao4").show()
})
$("#suoxiao4").click(function() {
$(".moban_img2").css("transform","scale(0.2)")
$(this).hide()
$("#suoxiao").show()
})
//旋转
$("#xuanzhuan").click(function () {
$(".moban_img2").css({transform:"rotate(90deg)","transform-origin":"50% 50%"})
$(this).hide()
$("#xuanzhuan2").show()
})
$("#xuanzhuan2").click(function () {
$(".moban_img2").css({transform:"rotate(180deg)","transform-origin":"50% 50%"})
$(this).hide()
$("#xuanzhuan3").show()
})
$("#xuanzhuan3").click(function () {
$(".moban_img2").css({transform:"rotate(270deg)","transform-origin":"50% 50%"})
$(this).hide()
$("#xuanzhuan4").show()
})
$("#xuanzhuan4").click(function () {
$(".moban_img2").css({transform:"rotate(360deg)","transform-origin":"50% 50%"})
$(this).hide()
$("#xuanzhuan").show()
})
//关闭放大效果
$(".closeImg img").click(function () {
$("#dialog_upload8").css("opacity",'1')
$("#dialog-bg2").hide()
})
});
css
.anniu_uplode8 span {
display: inline-block;
width:110px;
height:43px;
border-radius:4px;
border:1px solid rgba(206,208,218,1);
text-align: center;
line-height: 43px;
font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(79,83,98,1);
cursor: pointer;
position: relative;
}
.fileu {
position: absolute;
left: 0;
opacity: 0;
cursor: pointer;
}
.anniu_uplode8 p {
float: right;
font-size:12px;
font-family:MicrosoftYaHei;
color:rgba(167,167,172,1);
line-height:20px;
margin-top: 10px;
}
#imgBox {
width: 100%;
text-align: center;
}
#imgBox img {
display: inline-block;
width: 200px;
height: 137px;
}
.bottom8{
width:574px;
height:74px;
text-align: center;
background:rgba(255,255,255,1);
position: absolute;
bottom: 0px;
left: 0px;
}
.moban2 {
min-height: 683px;
position: fixed;
top: 0;
background: rgba(0, 0, 0, 0.7);
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
background:rgba(0,0,0,0.3);
box-shadow:0px 2px 4px 0px rgba(0,0,0,0.5);
}
.moban2 {
min-height: 683px;
position: fixed;
top: 0;
background: rgba(0, 0, 0, 0.7);
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 1000;
background:rgba(0,0,0,0.3);
box-shadow:0px 2px 4px 0px rgba(0,0,0,0.5);
}
.bottom {
position: absolute;
width: 100%;
bottom: 0;
height: 90px;
background:rgba(0,0,0,1);
border-radius:4px 4px 0px 0px;
opacity:0.39880000000000004;
box-sizing: border-box;
}
.bottom ul {
width: 520px;
height: 100%;
margin: 0 auto;
line-height: 90px;
}
.bottom ul li {
float: left;
margin-left: 62px;
cursor: pointer;
}
.closeImg {
display: inline-block;
position: absolute;
right: 44px;
top: 20px;
cursor: pointer;
}
.closeImg img {
display: inline-block;
width: 44px;
height: 44px;
}
.bottom ul li:nth-child(2) {
font-size:28px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(255,255,255,1);
}
.moban_img2 {
width: 500px;
height: 500px;
background-color: #fff;
position: relative;
left: 50%;
margin-left: -250px;
top: 50%;
margin-top: -250px;
vertical-align: middle;
}
.moban_img2 img {
width: 100%;
height: 100%;
}
#huanyuan {
font-size:28px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(255,255,255,1);
}
#suoxiao2 {
display: none;
}
#suoxiao3 {
display: none;
}
#suoxiao4{
display: none;
}
#fangda2 {
display: none;
}
#fangda3 {
display: none;
}
#fangda4{
display: none;
}
#xuanzhuan2 {
display: none;
}
#xuanzhuan3 {
display: none;
}
#xuanzhuan4{
display: none;
}
.selected-style {
background-color: #C5C5C5;
}
.current-month > .dayStyle:hover {
background-color: #C5C5C5;
}
.today-flag {
background-color: #e9e9e9;
}