效果图如下
image.png
可以copy然后直接用没问题的
html:
<form id="form" method="post" enctype="multipart/form-data">
<div class="chooseCon">
<div class="title">选择文件</div>
<input type="file" id="input" multiple="multiple">
</div>
<div class="imgContent" id="imgContent">
<div id="imgContent-header">文件内容展示</div>
</div>
<img src="" alt="" id="portrait">
</form>
//点击上传到服务器的按钮
<button id="button">save</button>
css:
.imgCon-item,.imgCon-item>.img-modal{
width:200px;
height:150px;
}
.imgCon-item>img{
width: 100%;
height: 100%;
}
.imgCon-item{
position: relative;
display: inline-block;
margin: 10px;
margin-left: 0px;
padding: 10px;
box-sizing: border-box;
background: #f2f2f2;
text-align: center;
padding-bottom: 15px;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-ms-transition: .5s all;
-o-transition: .5s all;
transition: .5s all;
vertical-align: top;
}
.imgCon-item:hover{
padding: 0px;
padding-bottom: 5px;
}
.imgCon-item>.img-modal{
opacity: 0;
position: absolute;
top:0;
left:0;
background: rgba(28, 20, 20, 0.6);
text-align: center;
color:#fff;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-ms-transition: .5s all;
-o-transition: .5s all;
transition: .5s all;
padding-top: 20px;
box-sizing: border-box;
}
.imgCon-item>.img-modal:hover{
cursor: pointer;
opacity: 1;
}
.imgCon-item>.img-modal>p{
width:80%;
overflow: hidden;
margin: 10px auto;
}
.imgCon-item>.img-modal>.closeBar{
position: absolute;
right:5px;
top:5px;
font-size: 1.2rem;
font-weight: 900;
}
.imgCon-item>.progressBar{
height: 5px;
background: #177cb0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-top: -4px;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-ms-transition: .5s all;
-o-transition: .5s all;
transition: .5s all;
}
.chooseCon{
display: inline-block;
position: relative;
height: 40px;
line-height: 40px;
width: 100px;
text-align: center;
border: 1px solid #ccc;
background: #f2f2f2;
}
.chooseCon>input[type='file']{
opacity: 0;
width: 100px;
height: 40px;
position: absolute;
top: 0;
left: 0;
}
.chooseCon>input[type='file']:hover{
cursor: pointer;
}
#imgContent{
border: 1px solid #ccc;
margin-top: 10px;
min-height: 100px;
}
#imgContent-header{
text-align: center;
padding: 10px;
border-bottom: 1px solid #ccc;
background: #f2f2f2;
}
js:
var formData = new FormData();
var btn = $('#button');
var input_ = $("#input");
var fileNum = 0;
var fileSize = 0;
var url_ = '';
// 保存触发
btn.click (function () {
$.ajax({
url: url_,
type: "post",
data: formData,
dataType: "json",
cache: false,
contentType: false,
processData: false,
xhr:function (res) {
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { //检查upload属性是否存在
//绑定progress事件的回调函数
myXhr.upload.addEventListener('progress', function (e) {
var percent = (e.loaded / e.total * 100).toFixed(2);
itemList.eq(i).find(".progress").width(percent + "%");
}, false);
}
return myXhr; //xhr对象返回给jQuery使用
},
success:function (res) {
},
error:function (res) {
}
})
});
// 选择文件点确定触发
input_.bind('change',function (e) {
if(window.FileReader) {
var lengthF = e.target.files.length;
for(var i = 0;i<lengthF;i++){
var file = e.target.files[i];
imgDraw(file);
}
}else{
console.log('您的浏览器不支持图片上传');
}
});
// 描绘图片
function imgDraw(file) {
var name = file.name;
var size = file.size;
var statue = '未上传';
var progressW = 0;
var fr = new FileReader();
// 读取完成
fr.onloadend = function(e) {
console.log('ppp');
statue = '上传成功';
var key = "file"+file.lastModified;
formData.append(key, file);
subtotal(1,size);
// 添加的文件item
var imgitemCon =' <div class="imgCon-item" id="file'+file.lastModified+'">'+
' <img src="'+e.target.result+'" alt=""> ' +
' <div class="img-modal"> ' +
' <b class="closeBar" onclick="deleteFn(this,'+file.lastModified+')">×</b> ' +
' <p class="name">'+name+'</p> ' +
' <p class="size">'+size+'</p> ' +
' <p class="status">'+statue+'</p> ' +
' </div> ' +
' <p class="progressBar" style="width:'+progressW+'%"></p> ' +
'</div>';
$('#imgContent').append(imgitemCon);
};
fr.onload = function(e) {
};
fr.onerror = function(e) {
statue = '上传失败';
};
fr.onprogress = function(e) {
progressW = e.loaded/size*100;
};
fr.readAsDataURL(file);
}
// 删除文件
function deleteFn(e,index){
var key = "file"+index;
if(confirm('确定删除吗？')){
formData.delete(key);
$('#'+key).remove();
var size = formData.get(key).size;
subtotal(-1,size);
}
}
// 计算文件个数和总大小
function subtotal(event,size) {
if(event == -1){
fileNum --;
fileSize-= size;
}else{
fileNum ++;
fileSize+= size;
}
$('#imgContent-header').html('共'+fileNum+'个文件，'+Math.round(fileSize/1024)+'MB');
}
关于上传的ajax方法参考有：
var xhr = jQuery.ajaxSettings.xhr();
xhr.upload.onload = function (){
alert('finish downloading')
}
xhr.upload.onprogress = function (ev) {
if(ev.lengthComputable) {
var percent = 100 * ev.loaded/ev.total;
console.log(percent,ev)
}
}
return xhr;
