jquery ajaxfileupload异步上传插件

jquery ajaxfileupload异步上传插件是一款可以在页面上实现文件异步上传的插件，可以帮助我们更方便地实现文件上传功能，并且使用方便、易于操作。下面是这款插件的完整攻略：

一、安装和引用

jquery ajaxfileupload异步上传插件可以使用npm包管理器进行安装，也可以使用CDN引入。以下是使用CDN引入的方法：

<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-ajaxfileupload/3.7.1/ajaxfileupload.js"></script>

二、使用方法

ajaxfileupload插件需要用到jQuery，因此我们需要在页面上引入jQuery库。

使用ajaxfileupload插件，我们需要采用以下方式调用：

$.ajaxFileUpload({
    url: 'upload.php', //上传的接口地址
    secureuri: false,
    fileElementId: 'fileToUpload', //input框中的id
    dataType: 'json',
    success: function (data, status) {
        if (typeof (data.error) != 'undefined') {
            if (data.error != '') {
                alert(data.error);
            } else {
                alert(data.msg);
            }
        }
    },
    error: function (data, status, e) {
        alert(e);
    }
});

其中，各个参数的含义如下：

• url：指定接口地址；
• secureuri：是否启用安全传输，默认为false；
• fileElementId：选择要上传的文件，多个文件需要分别上传；
• dataType：设定上传后返回的数据类型，可以为json、xml等；
• success：上传成功后的回调函数；
• error：上传失败时的回调函数。

三、示例

示例1：实现图片上传并预览

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="imgUpload" name="imgUpload" multiple>
</form>
<section id="imgShow"></section>
<button id="uploadBtn">上传</button>
<script>
    $(function () {
        $('#uploadBtn').click(function () {
            var file_data = $('#imgUpload').prop('files')[0];
            var form_data = new FormData();
            form_data.append('file', file_data);
            $.ajax({
                url: 'upload.php',
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'post',
                success: function (res) {
                    console.log(res);
                    if (res.code === 0) {
                        var imgUrl = res.data;
                        var imgHtml = '<img src="'+imgUrl+'"/>';
                        $('#imgShow').html(imgHtml);
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (res) {
                    alert('请求失败，请重试！');
                }
            });
        });
    });
</script>

示例2：实现音频上传

<input id="file" type="file" name="file" />
<button type="button" onclick="upload()">上传</button>
<script>
    function upload() {
        $.ajaxFileUpload({
            url: 'upload.php', //上传文件的请求路径
            secureuri: false, //是否安全传输
            fileElementId: 'file', //文件上传input的id
            dataType: 'json', //上传文件的类型
            success: function(data, status) { //上传成功的回调函数
                console.log(data);
                console.log(status);
            },
            error: function(data, status, e) { //上传失败的回调函数
                console.log(e);
            }
        });
    }
</script>

以上就是jquery ajaxfileupload异步上传插件的完整攻略，希望能对你有所帮助！