日期:2014-05-17 浏览次数:20987 次
先上图看看效果
:

通过右上角最小化按钮或者双击标题栏将窗口最小化哦
:

花了半天只做了简单的封装和效果,有时间可以改进下,比如上传图片的时候显示缩略图、拖拽文件上传。
重点来了,上代码
:
$.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();