blueimp jQuery-File-Upload不返回有关错误的信息

时间:2015-12-24 19:28:56

标签: jquery file-upload jquery-file-upload

我正在尝试使用blueimp/Jquery-fileupload发送两个输入文件,我将autoUpload设置为false,按钮将触发发送,但它失败,我不知道发生了什么因为根本没有错误。

这是我的代码:

<form name="frmData" id="frmData" enctype="multipart/form-data">

    <div class="field-input">
        <span class="container-icon"></span>
        <input type="text" name="name" class="" placeholder="Name" />
    </div>

    <div class="field-input">
        <span class="container-icon"></span>
        <textarea name="description" placeholder="Description" class=""></textarea>
    </div>

    <div class="container-input">
        <span class="btn btn-default fileinput-button">
            <i class="fa fa-picture-o"></i>
            <span>Imagen</span>
            <input type="file" name="picture" id="picture" class=""/>
        </span>
        <div id="preview_picture" class="files">
            <div></div>
        </div>
    </div>

    <div class="container-input">
        <span class="btn btn-default fileinput-button">
            <i class="fa fa-file-image-o"></i>
            <span>Logo</span>
            <input type="file" name="photo" id="photo" class=""/>
        </span>

        <div id="preview_photo" class="files">
            <div></div>
        </div>
    </div>

    <button type="button" class="btn btn-success" id="btnSend">Send</button>
</form>

<script type="text/javascript">
    var fileUploader, fileUploadList = [], paramNames = [];

    fileUploader = $('#frmData').fileupload({
            url: urlSendData,
            fileInput: $("input:file"),
            dataType: 'json',
            autoUpload: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 999000,
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            previewMaxWidth: 100,
            previewMaxHeight: 100,
            previewCrop: true
        }).on("fileuploadadd", function(e, data){
            data.context = $('#preview_'+e.delegatedEvent.target.name);

            fileUploadList[e.delegatedEvent.target.name] = data.files[0];
            paramNames[e.delegatedEvent.target.name] = e.delegatedEvent.target.name;
        }).on('fileuploadprocessalways', function (e, data) {
            var index = data.index,
                file = data.files[index],
                node = $(data.context.children()[index]);
            if (file.preview) {
                node.html(file.preview);
            }
            if (file.error) {
                node.html($('<span class="text-danger"/>').text(file.error));
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }).on('fileuploaddone', function (e, data) {
            console.log(e);
            console.log(data);
        }).on('fileuploadfail', function (e, data) {
            console.log(e);
            console.log(data);
        }).bind('fileuploadprocessdone', function (e, data) {
            console.log(e);
            console.log(data);
        }).bind('fileuploadprocessfail', function (e, data) {
            console.log(e);
            console.log(data);
        }).prop('disabled', !$.support.fileInput)
        .addClass($.support.fileInput ? undefined : 'disabled');

        $('#btnSend').click(function() {
            console.log('sendData');

            fileUploader.fileupload('send', {
                files: fileUploadList,
                paramName: paramNames,
                formData: {
                    name: $('input[name=name]').val(),
                    description: $('textarea[name=description]').val()
                }
            })
            .success(function (result, textStatus, jqXHR) {
                console.log(result);
            })
            .error(function (jqXHR, textStatus, errorThrown) { //*** It always fire
                console.log(jqXHR); // *** but no info about the error
                console.log(textStatus);
                console.log(errorThrown);
            });
        });
</script>

0 个答案:

没有答案