日期:2014-05-17 浏览次数:20822 次
先上图看看效果:
通过右上角最小化按钮或者双击标题栏将窗口最小化哦:
花了半天只做了简单的封装和效果,有时间可以改进下,比如上传图片的时候显示缩略图、拖拽文件上传。
重点来了,上代码:
$.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();