基于ajax的Html5文件下传插件，带进度并支持图片预览
基于ajax的Html5文件上传插件，带进度并支持图片预览
先上图看看效果：
通过右上角最小化按钮或者双击标题栏将窗口最小化哦：
花了半天只做了简单的封装和效果，有时间可以改进下，比如上传图片的时候显示缩略图、拖拽文件上传。
重点来了，上代码：
$.html5Upload = function (param) {
var option = $.extend({
id: '', //上传界面唯一标识id
title: '', //标题文字
url: '', //文件上传后台处理地址
filter: null, //上传文件过滤函数，参数为files，必须返回files
fileNameLength: 50, //显示文件名长度
onDelete: null, //当某一个上传文件上传成功之后（自动）或被删除（手动）的时候执行的方法。接受一个参数(file)，表示 当前删除文件。
onSuccess: null, //当前文件上传成功执行的回调方法。接受两个参数(file, response)，表示当前上传成功的文件对象和后台返回的字符内容。
onFailure: null, //当前文件上传失败执行的回调方法。接受两个参数(file, response)，表示当前上传失败的文件对象和后台返回的字符内容。
onComplete: null, //当前文件对象列表全部上传完毕执行的回调方法。无可用参数。
onClose: null, //关闭上传界面后回调函数
auto: true //自动弹出文件选择框
}, param || {});
var xhr;
var upload = $('#divFileUpload_' + option.id); //上传模块容器
if (upload.length != 0) {
upload.remove();
}
if ($('#file_upload').length == 0) {
$('body').append("<input type='file' multiple id='file_upload' style='width: 0px; height: 0px; position: absolute;left: -9999px; top: -9999px'>");
$('#file_upload').bind('change', function (e) {
funDealFiles(e.target.files || e.dataTransfer.files);
$('#file_upload').val('');
});
}
upload = $("<div class='upload' id='upload_" + option.id + "'>" +
"<div class='upload_title' title='双击最小化窗口'>" + option.title + "<span class='upload_btn_mini upload_btn_mini_yc' title='最小化'></span></div>" +
"<div class='upload_btn_div'>" +
"<div class='upload_btn' id='upload_btn_select_" + option.id + "'>选择文件</div>" +
"<div class='upload_btn' id='upload_btn_upload_" + option.id + "'>上 传</div>" +
"<div class='upload_btn' id='upload_btn_close_" + option.id + "'>关 闭</div>" +
"<div class='upload_drag' id='upload_drag_" + option.id + "'>或者将文件拖到此处</div>" +
"</div>" +
"<hr/>" +
"<div class='upload_list' id='upload_list_" + option.id + "'></div>" +
"</div>").appendTo('body');
$('#upload_btn_select_' + option.id).click(function () {
//浏览
$('#file_upload').click();
});
$('#upload_btn_upload_' + option.id).click(function () {
//上传
sendFile();
});
$('#upload_btn_close_' + option.id).click(function () {
//关闭
if (confirm('确定关闭吗？')) {
if (option.onClose) {
option.onClose.call(this);
}
$('#upload_' + option.id).remove();
}
});
//拖拽上传
var dragDrop = $('#upload_drag_' + option.id)[0];
dragDrop.addEventListener("dragover", function (e) {
e.stopPropagation();
e.preventDefault();
$(this).addClass("upload_drag_hover");
}, false);
dragDrop.addEventListener("dragleave", function (e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass("upload_drag_hover");
}, false);
dragDrop.addEventListener("drop", function (e) {
e.stopPropagation();
e.preventDefault();
$(this).removeClass("upload_drag_hover");
funDealFiles(e.target.files || e.dataTransfer.files);
}, false);
$('.upload_title', upload).dblclick(function () {
$('.upload_btn_mini', upload).click();
});
$('.upload_btn_mini', upload).click(function () {
var _this = $(this);
var title = _this.attr('title');
if (title == '最小化') {
//最小化
_this.attr('title', '还原').removeClass('upload_btn_mini_yc').addClass('upload_btn_mini_hy').data('offset', upload.offset()).parent().attr('title','双击还原窗口');
upload.animate({ width: '200px', height: '33px', bottom: '10px', right: '10px' }, 200);
} else {
//还原
var offset = _this.data('offset');
upload.animate({ width: '480px', height: '290px', bottom: offset.top, right: offset.left }, function () {
upload.removeAttr('style');
});
_this.attr('title', '最小化').removeClass('upload_btn_mini_hy').addClass('upload_btn_mini_yc').parent().attr('title', '双击最小化窗口');
}
});
if (option.auto) {
$('#divFileUpload_btn_select_' + option.id).click();
}
//选中文件的处理与回调
var funDealFiles = function (files) {
//过滤文件
if (typeof (option.filter) == 'function') {
files = option.filter.call(this, files);
}
var i = 0;
var funAppendImage = function () {
var file = files[i];
if (file) {
var fileName = file.name.length > option.fileNameLength ? file.name.substr(0, option.fileNameLength) + '...' : file.name;
var fileDiv = $("<div class='upload_item' status='start'>" +
"<div class='upload_item_title' title='" + file.name + "'>" + fileName + "(" + (file.size / 1024).toFixed(2) + "kb)</div><div class='upload_item_del'>删除</div>" +
"<div class='upload_item_progress'>" +
"<div class='upload_item_progress_bg'></div>" +
"<div class='upload_item_progress_msg'></div>" +
"</div>" +
"</div>").data('file', file).appendTo('#upload_list_' + option.id);
var cancle = fileDiv.find('.upload_item_del');
cancle.click(function () {
//删除
var tmp = $(this).parent();
if (tmp.attr('status') == 'uploading') {
if (confirm('确定删除当前文件吗？')) {
xhr.abort();
}
} else {
tmp.remove();
}
});
//如果是图片，则显示缩略图
if (file.type.indexOf('image') != -1) {
var reader = new FileReader();
reader.onload = function (e) {
//展示img
$('.upload_item_title', fileDiv).before("<div class='upload_item_img'><img src='" + e.target.result + "'</div>");
}
reader.readAsDataURL(file);
}
i++;
funAppendImage();
} else {
//遍历结束
}
};
funAppendImage();
};
function sendFile() {
var list = $('.upload_item[status=start]', upload);
if (list.length == 0) {
if (typeof (option.onComplete) == 'function') {
//全部完成事件
option.onComplete.call();
}
return;
}
var fileDiv = list.eq(0).attr('status', 'uploading');
var file = fileDiv.data('file');
var msg = fileDiv.find(".upload_item_progress_msg");
var bg = fileDiv.find(".upload_item_progress_bg");
//上传到服务器
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
fileDiv.attr('status', 'uploaded');
//bg.css('width', '100%');
var obj = eval("(" + xhr.responseText + ")");
if (typeof (option.onSuccess) == 'function') {
//上传成功事件
option.onSuccess.call(this, obj);
}
}
xhr = null;
sendFile();
}
};
xhr.upload.onprogress = function (e) {
//进度显示
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
msg.html(percentage + ' %');
bg.animate({ width: percentage + '%' }, 100);
}
};
xhr.onabort = function (e) {
fileDiv.remove();
sendFile();
}
xhr.onload = function (e) {
};
xhr.onerror = function (e) {
msg.html("上传失败！");
fileDiv.attr('status', 'error');
if (typeof (option.onFailure) == 'function') {
//上传失败事件
option.onFailure.call();
}
sendFile();
}
xhr.open('post', option.url, true);
var formData = new FormData();
formData.append("file", file);
xhr.send(formData);
msg.html("上传中...");
}
};