浅谈异步上传插件 jquery-file-upload插件

时间 2019-12-02

标签浅谈异步上传插件 jquery file upload 栏目 JQuery 繁體版

原文原文链接

当咱们须要异步上传文件的时候，咱们倾向于在网上查找相关的JQuery插件，jquery-file-upload就是咱们常常看到的，可是他的主页是英文的，对于咱们这些英语比较差的同窗来讲，简直就是。。。今天就来说一下最简单的使用方法，若是有写的很差的地方还请拍砖。php

介绍

jQuery File Upload是一个很是优秀的上传组件，主要使用了XHR做为上传方式，而且利用了至关多的现代浏览器功能，因此能够实现诸如批量上传、超大文件上传、图片预览、拖拽上传、上传进度显示、跨域上传等功能。html

他的功能很是强大，API也比较简单，若是可以熟练使用$.ajax的话，相信理解起来也不是多难的事，可是它的UI也会很是难用。我的建议，若是小的组件能够本身定义一套简单的UI，不必使用那么复杂的东西。若是你必定要使用它的UI的话，建议你看一下定制jQuery File Upload为微博式单文件上传jquery

jQuery File Upload的简化模型

jQuery File Upload包含了一堆文件，首先须要弄清楚的是最核心的部分是哪些，官网已经给出了最简单的模型基本功能，一个最简单的jQuery File Upload上传组件，必须包括如下文件：git

jQuery库，建议jQuery 1.8以上版本
js/vendor/jquery.ui.widget.js ： jQuery UI Widget
js/jquery.iframe-transport.js ：扩展iframe数据传输
js/jquery.fileupload.js ： jQuery File Upload核心类
js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题

官网事例：github

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>

当咱们须要点击按钮才能提交上传的时候，按钮上传ajax

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

浅谈设计原理

当咱们对某个file input标签执行 upload插件的初始化方法后，插件会监听这个file input的change事件

当用户选择文件的时候，会触发change事件json

if ($.support.fileInput) {
     this._on(this.options.fileInput, {
         change: this._onChange
     });
 }

在_onChange处理函数中，会遍历files，触发upload插件的change方法
当change函数返回true的时候，会触发upload插件的add方法
在upload插件的回调函数中，会传入两个参数，fn(事件信息, 数据对象)，这个数据对象很是重要，咱们几乎全部的操做都要使用到它
在upload插件的add方法中能够执行咱们的逻辑，例如咱们想判断文件后缀是否知足条件，插件自带的参数 acceptFileTypes 在简化模型中不起做用，咱们能够在change和add方法中判断，若是不知足返回false便可，若是经过能够直接执行data.submit()进行提交
若是上传成功会执行done函数（响应成功），失败则会执行fail函数
全部的回调函数的原理都是同样的，后面的你们本身研究api

自定义UI

聊聊官网自带UI

自定义UI模版须要严格按照官网提供的模版进行操做，不然可能会出现各类问题，必要使用他的模版的缘由是：ui的JS中操做Dom的逻辑都是固定的，若是你不按照这种格式的话，js查找不到相应的元素，不能获取相应的数据，包括上面提到的data数据。跨域

探讨自定义UI

官网效果：浏览器

自定义实现：

这个插件全部的核心就是上面提到的data数据，咱们能够随意的定义UI，可是定义好以后须要对UI和data数据进行绑定，这个是最重要的环节，图中的文件列表右侧的start、cancle按钮都很是好实现，使用简单模型里面的例子既能够了，这里就很少介绍了。

这里面最让人烦恼的就是上面那几个按钮，怎么绑定到全部数据上呢？方法很是简单，就是你把每个文件的data数据存储在一个地方（可使用jQuery.data()），在点击上面按钮的时候，查找符合要求的文件列表，读取data信息，调用data.submit...等方法就能够了，SoEasy！

结论 data这个数据对象很是重要，用data能实现你想要的自定义功能。