jQuery-file-upload随笔

若想使用插件自带的验证必须要引入以下文件

<script src="/static/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/js/vendor/jquery.iframe-transport.js"></script>
<script src="/static/js/vendor/jquery.fileupload.js"></script>
<script src="/static/js/vendor/jquery.fileupload-process.js"></script>
<script src="/static/js/vendor/jquery.fileupload-validate.js"></script>
<script src="/static/js/vue-components/ft.attach.js"></script>

var uploader = $('#fileupload');
uploader.fileupload(
    {
        url: '/feature/attach/dt/create/fild/',
        singleFileUploads: false, //一次上传多个文件
        autoUpload: false,
        //limitMultiFileUploads: 3, //每个请求最多上传3个文件
        maxFileSize: 50 * 1024 * 1024,
        maxNumberOfFiles: 3,
        messages: {
            maxFileSize: '超过允许的最大值！',
            maxNumberOfFiles: '上传的文件数量超过允许的最大值！'
        },
        processfail: function (e, data) {
            //单个文件上传失败
            self.datafile = '';
            // console.log(data)
            // $('#fileupload').fileupload('destroy');
            var currentFile = data.files[data.index];
            if (data.files.error && currentFile.error) {
                // there was an error, do something about it
                // console.log(currentFile);
                if (currentFile.error == '上传的文件数量超过允许的最大值！') {
                    $('#warning_file').css('display', 'block').html('').prepend(currentFile.error + '<br>')
                } else {
                    $('#warning_file').css('display', 'block').prepend(currentFile.name + '&nbsp;&nbsp;&nbsp;&nbsp;' + currentFile.error + '<br>')
                }
            }
            // return false
        },
        change: function () {
            $('#warning_file').css('display', 'none').html('');
            $('#fileupload_file_name').html('')
        },


        start: function (e) {
            // 开始上传后不能再选文件了
            $("#fileupload").attr("disabled", "disabled");
        },
        process: function (e, data) {
            // console.log('回调为单个文件的处理队列的开始。')
            //    回调为单个文件的处理队列的开始。
        },
        processdone: function (e, data) {
            self.datafile = data
            // console.log('单个文件处理圆满结束', data)
            //    单个文件处理圆满结束
        },
        processstart: function (e, data) {
            // console.log('上传队列处理开始')
            //    队列处理开始
        },
        send: function (e, data) {
            // console.log('send')
            //    每个上传文件开始的时候
        },
        sent: function (e, data) {
            console.log('sent')
        },
        started: function (e, data) {
            // console.log('started')
            //    开始的回调等效于开始回调，并且在开始回调运行之后触发，并且在开始回调中调用的过渡效果已经完成。
        },
        stopped: function (e, data) {
            // console.log('stopped')
            //    停止的回调等效于停止回调，并且在停止回调运行并且在停止回调和所有完成回调中调用的过渡效果已完成之后触发
        },
        always: function (e, data) {
            // console.log('always', data)
            //    回调结束（成功，中止或错误）上传请求。这个回调相当于所提供的完整的回调
        },
        // add:function (e,data) {
        //     console.log('add')
        //     data.submit()
        // },
        chunkalways: function (e, data) {
            // console.log('回调结束', data)
            //    回调结束，不论是上传成功还是失败还是终止
        },
        processalways: function (e, data) {
            // console.log('结束一个文件上传队列', data)
            // data.submit()
            //    结束一个文件上传队列
        },
        processstop: function (e, data) {
            // console.log('文件上传队列停止', data)
            //    文件上传队列停止
        },
        completed: function () {
            // console.log('completed')
        },
        progressall: function (e, data) {
            //回调全局上传进度事件。
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progresss').css(
                'width',
                progress + '%'
            );
            $('#progresss').html(progress + '%')
        },
    })
    .bind('fileuploadadd', function (e, data) {

        for (var i = 0; i < data.files.length; i++) {
            $('#fileupload_file_name').prepend(data.files[i].name + '<br>');
        }
    })
    .bind('fileuploadprocessdone', function (e, data) {
        // console.log('wode',data)
        // console.log(data.files[0].error)
        // console.log('fileuploadprocessdone')
    }).bind('fileuploadprocessstart', function (e, data) {
    // console.log('sent111')
    //  console.log(data.files[0].error)

});

版权声明：