<div class="form-card">
<ul class="append_list">
<!-- <li><span>×</span><img src="images/event4.png"/></li>-->
</ul>
<div class="upload_drag_area" id="fileDragArea">
<div class="filePicker">
<p class="fileicon"></p>
<p class="filebtns">拖拽图片到这里,或
<span class="andArea">
<i>点此添加</i>
<input id="fileImage" type="file" accept=".jpg, .jpeg, .png" multiple/>
</span>
</p>
<p class="filetips">允许上传最多20张图片(JPG/PNG等格式),单张大小不超5MB</p>
</div>
</div>
<div class="upload-sub">
<button type="reset" class="resbtn">清空重输</button>
<button type="button" class="subbtn">确认上传</button>
</div>
</div>
$(document).ready(function() {
//点击上传
$('input[type="file"]').change(function(e){
var files = e.target.files;
uploadBase64(files);
});
//删除
$(".append_list").on("click","li span",function(){
$(this).parent('li').remove();
var lis=$(".append_list").find('li').length;
if(lis==0){
$('.filetips').html('允许上传最多20张图片(JPG/PNG等格式),单张大小不超5MB');
}else{
$('.filetips').html('已选'+lis+'张,还可选'+(20-lis)+'张');
}
});
//拖拽上传
var dropZone = $('#fileDragArea');
// 初始化拖拽区域
dropZone.on('dragover', function(e) {
e.preventDefault();
$(this).addClass('upload_drag_hover');
});
dropZone.on('dragleave', function(e) {
e.preventDefault();
$(this).removeClass('upload_drag_hover');
});
dropZone.on('drop', function(e) {
e.preventDefault();
$(this).removeClass('upload_drag_hover');
var files = e.originalEvent.dataTransfer.files;
uploadBase64(files);
});
$('button[type="reset"]').click(function(e){
$(".append_list").empty();
});
});
//文件上传
function uploadBase64(files) {
if (files.length > 0) {
for (var i = 0; i < files.length; i++) {
if(!/image\/\w+/.test(files[i].type)){
alert('上传文件类型必须是 jpg, jpeg, png格式!');
return false;
}else{
var reader = new FileReader();
reader.onload = function () {
var html='<li><span>×</span><img src="'+this.result+'"/></li>'
$('.append_list').append(html)
}
reader.readAsDataURL(files[i]);
}
}
$('.filetips').html('已选'+files.length+'张,还可选'+(20-files.length)+'张');
}
// 处理待上传的文件
/*$.ajax({
url: 'upload.php',
data: {
fileData: data,
fileName: fileName,
fileSize: fileSize
},
type: 'POST',
success: function() {
console.log('文件上传成功!');
}
});*/
}
本文使用原生html5自带dragover,dragleave,drop方法,实现拖拽显示文件效果,不依赖插件。