<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.picUpCont label {
width: 100%!important;
}
.picUpWrap {
width: 100%;
overflow: hidden;
text-align: center;
padding-right: 15px;
padding-bottom: 5px;
}
.fileBox {
width: 100px;
height: 100px;
margin-bottom: 30px;
float: right;
position: relative;
}
.fileBox .fileBox_addBtn {
width: 100%;
height: 100%;
font-size: 40px;
line-height: 100px;
text-align: center;
color: #666;
border: 1px dashed #ccc;
box-sizing: border-box;
}
.fileBox .fileBox_showImg{
position: absolute;
width: 100%;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
.fileBox input {
display: none;
}
.fileBox .fileBox_discription{
position: absolute;
width: 100%;
bottom: -25px;
text-align: center;
color: #999;
font-size: 14px;
text-decoration: underline;
}
.fileBox_loading {
position: absolute;
width: 100%;
background: url('https://files.cnblogs.com/files/iwzyuan/loading.gif') center center no-repeat;
background-size: 50px 50px;
height: 100%;
}
.showPic {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
display: none;
overflow: auto;
}
.showPic .showPic_mask {
background: rgba(0,0,0,.5);
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
display: block;
}
.showPic .showPic_img {
position: absolute;
width: 90%;
height: auto;
top: 50%;
z-index: 2;
transition: all .5s;
opacity: 0;
left: 0;
right: 0;
margin: auto;
}
.showPic .showPic_loading {
width: 50px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<input class="pic1" type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
<input class="pic1" uploadUrl='./img.jpg' type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
(function ($,global){
function PicUpload(inputFile){
this.settings = { //设置默认参数
'space' : 10, //左右margin值
'size' : 3, //文件大小上限
'ajaxUrl' : '' //服务端请求路径
};
this.inputFiles = $('.'+inputFile);
this.showImgDom = null;
this.inputFileClassName = inputFile;
}
PicUpload.prototype.init = function (options){
/*
初始化
*/
$.extend(this.settings, options); //参数覆盖
this.setStyle(); //改变样式
this.addEvents(); //为各个元素添加事件
}
PicUpload.prototype.setStyle = function (){
/*
生成图片上传样式
*/
var This = this;
this.inputFiles.each(function (index,val){
This.detailStyle.setStyle(val,This); //设置上传样式
});
this.showImgDom = $('.fileBox_showImg');
this.fileBox_addBtn = $('.fileBox_addBtn');
this.fileBox_discription = $('.fileBox_discription');
}
PicUpload.prototype.addEvents = function (){
/*
为inputFile和img添加事件
*/
var This = this;
this.fileBox_addBtn.each(function (index,val){ //点击触发file文件上传click
$(val).click(function (){
$(this).siblings('.'+This.inputFileClassName).trigger("click");
})
})
this.inputFiles.each(function (index,val){ //点击触发file文件上传click
$(this).change(function (){
This.httpGetPic($(this));
})
})
this.fileBox_discription.each(function (index,val){ //点击触发file文件上传click
$(this).click(function (){
$(this).siblings('input').trigger('click');
})
})
this.showImgDom.each(function (index,val){ //点击触发查看大图模式
$(this).click(function (){
var originalUrl = $(this).siblings('input').attr('originalUrl');
This.detailStyle.showoriginalPic(originalUrl)
})
})
}
PicUpload.prototype.httpGetPic = function ($currInput){
/*
ajax请求上传图片的url
*/
var This = this;
var imgUrlBefor = $currInput.attr('uploadUrl');
var filesInfo = $currInput[0].files[0];
if(!filesInfo) return;
if (!/image/w+/.test(filesInfo.type)) { //图片格式判断
this.tips('请上传正确格式的图片')
return false;
}else if(filesInfo.size > 1024*1024*this.settings.size){ //图片大小判断
this.tips('图片大小不能超过'+this.settings.size+'Mb');
return false;
}
var formData = new FormData();
formData.append('file_upload', filesInfo);
this.detailStyle.showLoading($currInput)
console.log(formData)
return;
$.ajax({
url: This.settings.ajaxUrl, //参数在init调用时传进来
type: 'POST',
data : formData,
dataType: 'JSON',
cache: false,
processData: false,
contentType: false,
success : function(res){
console.log(res);
var originalUrl = '/'+res.original;
var imgUrl = '/'+res.data;
This.detailStyle.showPic($currInput,imgUrl,originalUrl); //更换后的url
This.detailStyle.hideLoading($currInput);
},
error : function(res) {
console.log(res)
}
});
}
PicUpload.prototype.httpDeletePic = function (imgUrlBefor){
/*
ajax请求删除上传之前的图片
*/
}
PicUpload.prototype.detailStyle = { //DOM操作汇总
"setStyle" : function (val, This){ //生成上传样式
var imgUrl = $(val).attr('uploadUrl');
var originalUrl = $(val).attr('originalUrl');
if( !imgUrl ){
$(val).css({'display':'none'}).
wrap('<div class="fileBox"></div>').
after('<div class="fileBox_addBtn">+</div>').
after('<img class="fileBox_showImg" style="display:none;">').
after('<div class="fileBox_loading" style="display:none;"></div> ').
after('<div class="fileBox_discription" style="display:block;">点击上传</div> ').
parent('.fileBox').css({
marginLeft : This.settings.space,
marginRight : This.settings.space
})
}else {
$(val).css({'display':'none'}).
wrap('<div class="fileBox"></div>').
after('<div class="fileBox_addBtn" style="display:none;">+</div>').
after('<img class="fileBox_showImg" src="'+imgUrl+'" originalUrl="'+originalUrl+'"> ').
after('<div class="fileBox_loading" style="display:none;"></div> ').
after('<div class="fileBox_discription" style="display:block;">点击更换</div> ').
parent('.fileBox').css({
marginLeft : This.settings.space,
marginRight : This.settings.space
})
$(val).siblings('.fileBox_showImg')[0].onload = function (){
var height = this.clientHeight+'px'
this.style.height = height;
// this.style.marginTop = height/2;
}
}
},
'showPic' : function ($currInput,imgUrl,originalUrl){ //展示接收的图片DOM操作
$currInput.attr('uploadUrl',imgUrl).attr('originalUrl',originalUrl).siblings('.fileBox_showImg').
css('display','block').attr('src',imgUrl).
siblings('.fileBox_addBtn').css('display','none')
$currInput.siblings('.fileBox_discription').text('点击更换')
},
'showLoading' : function ($currInput){ //展示loading样式
$currInput.siblings('.fileBox_discription').text('上传中...');
$currInput.siblings('.fileBox_addBtn').css('display','none');
$currInput.siblings('.fileBox_loading').css('display','block');
},
'hideLoading' : function ($currInput){ //隐藏loading样式
$currInput.siblings('.fileBox_loading').css('display','none')
},
'showoriginalPic' : function (originalUrl){ //展示大图
$('body').append('<div class="showPic"><div class="showPic_mask"></div><img class="showPic_loading" src="https://files.cnblogs.com/files/iwzyuan/loading.gif"><img class="showPic_img" src="'+originalUrl+'"></div>');
$('.showPic').css('display','block');
$('.showPic_img').load(function (){
var marTop = $(this)[0].clientHeight/2;
$('.showPic_loading').css('display','none');
$('.showPic_img').css({'opacity':1,'marginTop':-marTop});
});
$(".pic").on(' touchstart',function(){
$(".pic").on('touchmove',function(event) {
event.preventDefault();
}, false);
})
$('.showPic').click(function (){
$(this).remove();
});
}
}
PicUpload.prototype.tips = function (msg){ //tips样式，此处用了最简易的alert
alert(msg);
}
global.PicUpload = PicUpload;
})(jQuery,this);
</script>
<script>
var picUploadObj = new PicUpload('pic1');
picUploadObj.init({
size : 50,
space : 30,
ajaxUrl : 'xxx.php'
});
</script>
</body>
</html>