日期:2014-05-17  浏览次数:20822 次

基于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();