好用的jQuery2.X文件上传插件，使用HTML5+JS

;(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {
                var $this = $(this);
                $this.data('Kwok', {
                    inputs: {},//所有文件的输入对像
                    inputCount: 0,//用于input上的name加循环数（input的创建个数）
                    fileID: 0,
                    queue: {//单个队列
                        count: 0,//队列里的计数器
                        selected: 0,//上次操作的选择数
                        replaced: 0,//上次选择中被替换的文件数
                        queued: 0,//上次选择操作中添加到队列中的文件数
                        cancelled: 0//已从队列中取消或删除的文件总数
                    },
                    uploads: {//上传
                        current: 0,//当前上载的文件数
                        attempts: 0,//在上一次上传操作中尝试上传的文件数
                        successful: 0,//在上一次上传操作中成功上传的文件数
                        count: 0//成功上传的文件总数
                    }
                });
                var $data = $this.data('Kwok');
                //上传默认设置,使用extend合并options传递过来的配置，前台自由修改默认配置
                var settings = $data.settings = $.extend({
                    'auto': true,//是否自动上传
                    'buttonText': '批量上传步骤图',//按钮名字
                    'fileObjName': 'stpeimg',//$_FILES[传递名字]
                    'fileSizeLimit': 8388608,//文件大小限制(单位：字节)、默认8M
                    'fileType': 'image/jpg,image/jpeg,image/gif,image/png',//文件类型限制，如果不限制为false
                    'formData': {},//表单其它数据提交$_POST
                    'itemTemplate': '<div class="Kwok-queue-item"></div>',//队列中项中的HTML标记
                    'multi': true,//是否允许上传多个文件
                    'uploadLimit': 20,//限制单次最多可上传的文件数量
                    'queueSizeLimit': 99,//队列最大文件总数
                    'removeCompleted': true,//上传完后自动关闭进度条
                    'uploadScript': 'upload.php' //上传提交到服务端的接收地址
                }, options);
                //定义并设置上传框的样式
                $data.inputTemplate = $('<input type="file">').addClass('Kwok-input');
                //开始创建一个新的input上传
                $data.createInput = function () {
                    var input = $data.inputTemplate.clone();//创建并克隆一个input
                    var inputName = input.name = 'input' + $data.inputCount++;//把input的name加上循环数
                    if (settings.multi) {
                        input.attr('multiple', true);//是否允许上传多个文件
                    }
                    if (settings.fileType) {
                        input.attr('accept', settings.fileType);//文件类型限制
                    }
                    input.on('change', function () {
                        //绑定上传change事件,对计数清零开始
                        $data.queue.selected = 0;//上次操作的选择数
                        $data.queue.replaced = 0;//上次选择中被替换的文件数
                        $data.queue.queued = 0;//上次选择操作中添加到队列中的文件数
                        var limit = $data.queue.selected = this.files.length;//当前的上传文件总数
                        if (($data.queue.count + limit) > settings.queueSizeLimit && settings.queueSizeLimit !== 0) {
                            alert('最多允许上传：' + settings.queueSizeLimit + '个文件！');//判断限制
                        } else {
                            for (var n = 0; n < limit; n++) {
                                file = this.files[n];
                                $data.addQueueItem(file);
                            }
                            $data.inputs[inputName] = this;
                            $data.createInput();
                        }
                        if (settings.auto) {
                            methods.upload.call($this);//是否设置了自动上传
                        }
                    });
                    if ($data.currentInput) {
                        $data.currentInput.hide();//隐藏现有的当前项并添加新项
                    }
                    $data.button.append(input);//追加input
                    $data.currentInput = input;
                }

                $data.queueItem = $(settings.itemTemplate); //队列项模板（默认配置里）
                //向队列添加项目
                $data.addQueueItem = function (file) {
                    file.queueItem = $data.queueItem.clone();//创建队列项模板的克隆
                    file.queueItem.attr('id', settings.id + '-file-' + $data.fileID++);//将id添加到队列项
                    var fileName = file.name;
                    if (fileName.length > settings.truncateLength && settings.truncateLength != 0) {
                        fileName = fileName.substring(0, settings.truncateLength) + '...';
                    }
                    file.queueItem.data('file', file);//向文件添加引用
                    $data.queueEl.append(file.queueItem);
                    if (file.size > settings.fileSizeLimit && settings.fileSizeLimit != 0) {//检查文件限制大小
                        alert('对不起，您选择的文件太大了，请压缩后重试！');
                    } else {
                        $data.queue.queued++;
                        $data.queue.count++;
                    }
                }
                //文件上传
                $data.uploadFile = function (file, uploadAll) {
                    if (!file.skip && !file.complete && !file.uploading) {
                        file.uploading = true;
                        $data.uploads.current++;
                        $data.uploads.attempted++;
                        // 新建ajax请求
                        xhr = file.xhr = new XMLHttpRequest();
                        var formData = new FormData();// 新建表单对象
                        formData.append(settings.fileObjName, file);//添加表单对象
                        for (i in settings.formData) {
                            formData.append(i, settings.formData[i]);//追加其它数据到表单,如hash
                        }
                        xhr.open('post', settings.uploadScript, true);//打开ajax调用
                        xhr.addEventListener('load', function (e) {
                            if (this.readyState == 4) {
                                file.uploading = false;
                                if (this.status == 200) {
                                    $data.uploadComplete(e, file, uploadAll);
                                } else {
                                    alert('服务器端发生错误，状态码：' + this.status);
                                }
                            }
                        });
                        xhr.send(formData);// 使用(multipart/form-data)方式发送表单数据
                    }
                }
                // 当单个文件上传完成时触发
                $data.uploadComplete = function (e, file, uploadAll) {
                    // 触发完成事件
                    if (typeof settings.onUploadComplete === 'function') {
                        settings.onUploadComplete.call($this, file, JSON.parse(file.xhr.responseText));//返回的数据转为JSON格式，所以服务器端必须返回JSON
                    }
                    setTimeout(function () {
                        file.queueItem.remove();//删除文件上传信息框
                    }, 2000);
                    file.complete = true;
                    $data.uploads.successful++;
                    $data.uploads.count++;
                    $data.uploads.current--;
                    delete file.xhr;
                }
                // 统计上传文件数
                $data.filesToUpload = function () {
                    var filesToUpload = 0;
                    for (var key in $data.inputs) {
                        input = $data.inputs[key];
                        limit = input.files.length;
                        for (var n = 0; n < limit; n++) {
                            file = input.files[n];
                            if (!file.skip && !file.complete) {
                                filesToUpload++;
                            }
                        }
                    }
                    return filesToUpload;
                }
                // ----------------------
                // 程序初始化，先判断是否支持html5
                // ----------------------
                if (window.File && window.FileList && window.Blob && (window.FileReader || window.FormData)) {
                    settings.id = 'Kwok-' + $this.attr('id');//将id分配给对象,Kwok-调用时指定值（原ID）
                    $data.button = $('<div id="' + settings.id + '" class="Kwok-button">' + settings.buttonText + '</div>');//将文件输入在div中，并将溢出设置隐藏起来。
                    $this.before($data.button).appendTo($data.button).hide();//插入按钮、文件输入框并隐藏，不能remove
                    $data.createInput.call($this);//创造一个新input并回调
                    // 创建队列容器
                    settings.queueID = settings.id + '-queue';//用于后期查找
                    $data.queueEl = $('<div id="' + settings.queueID + '" class="Kwok-queue" />');
                    $data.button.after($data.queueEl);
                } else {
                    alert('对不起，您的浏览器不支持HTML5,请更换浏览器！');
                    return false;
                }
            });
        },
        // 开始上传文件到队列,通过 methods.upload 调用
        upload: function (file) {
            this.each(function () {
                var $this = $(this),
                    $data = $this.data('Kwok'),
                    settings = $data.settings;
                if (file) {
                    $data.uploadFile.call($this, file);
                } else {
                    //检查文件是否达到限制
                    if (($data.uploads.count + $data.uploads.current) < settings.uploadLimit || settings.uploadLimit == 0) {
                        // 循环遍历文件
                        $('#' + settings.queueID).find('.Kwok-queue-item').each(function () {
                            if (($data.uploads.current >= settings.simUploadLimit && settings.simUploadLimit !== 0) || ($data.uploads.current >= settings.uploadLimit && settings.uploadLimit !== 0) || ($data.uploads.count >= settings.uploadLimit && settings.uploadLimit !== 0)) {
                                return false;
                            }
                            $data.uploadFile($(this).data('file'), true);
                            if ($('#' + settings.queueID).find('.Kwok-queue-item').length == 0) {
                                $data.queueComplete();
                            }
                        });
                    } else {
                        if ($data.uploads.current == 0) {
                            if ($data.filesToUpload() > 0 && settings.uploadLimit != 0) {
                                alert('每次请选择:' + settings.uploadLimit + '个以下的文件！');
                            }
                        }
                    }

                }
            });
        }
    }
    $.fn.benba = function (method) {
        if (methods[method]) {
            //如果请求的方法存在则替换并执行
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            //如果是一个对对象方法并不则调用init配置
            return methods.init.apply(this, arguments);
        } else {
            $.error('方法：' + method + ' 不存在！');
        }
    }
})(jQuery);

可以批量或者单个文件上传，不需要框架就可以完成上传并预览。

载入jQuery和上传的JS后，调用方法如下：

<div id="upload"></div>
<script type="text/javascript">
var j = 0;
//批量上传	
$('#upload').benba({
	'uploadScript' : '后台接收地址',
	'formData':{'form':'发送值','hash':'发送值2'},
	'onUploadComplete':function(s,g) {//上传文件完成s(send)是发出去的信息,g(get)为后台返回的数据
	$('#img').html('<img src="'+g.url+'" style="height:180px;width:180px"/>');
	}
});
</script><div id="img"></div>

可以配合：http://www.55mx.com/php/27.html 完美实现jQuery+PHP的方式上传文件。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/28