基于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("");
        $('#file_upload').bind('change', function (e) {
            funDealFiles(e.target.files || e.dataTransfer.files);
            $('#file_upload').val('');
        });
    }
    upload = $("
" +
                    "
" + option.title + "
" +
                    "
" +
                        "
选择文件
" +
                        "
上 传
" +
                        "
关 闭
" +
                        "
或者将文件拖到此处
" +
                    "
" +
                    "
" +
                    "
" +
                "
").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 = $("
" +
                                    "
" + fileName + "(" + (file.size / 1024).toFixed(2) + "kb)
删除
" +
                                    "
" +
                                        "
" +
                                        "
" +
                                    "
" +
                                "
").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("
");
                    }
                    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("上传中...");
    }
};