Chrome未使用File API检测文件类型

时间:2015-08-03 15:56:06

标签: jquery jquery-file-upload fileapi

我正在尝试使用https://github.com/blueimp/jQuery-File-Upload进行文件类型验证,但它不起作用。

查看某些控制台输出,似乎文件类型为空。

Chrome 43和IE 11似乎被打破了,而Firefox 37则很好。

上传表单代码:( <form>不需要,查看示例,此处主要用于演示)

<form class="form form-horizontal" enctype="multipart/form-data" id="" method="post" data-url="<?php echo $upload_url; ?>">
                            <div class="form-group">
                                <label class="col-sm-2">Files</label>
                                <div class="col-sm-3">
                                    <span class="btn btn-success fileinput-button">
                                        <i class="glyphicon glyphicon-plus"></i>
                                       <span>Select files...</span>
                                       <input id="fileupload" type="file" name="userfile" multiple />
                                    </span>
                                 </div>
                                 <div class="col-sm-7">
                                    <p><small>NB. Max file size is 2mb. <br />Allowed file types are .jpg/.jpeg, .png, .gif and .bmp.</small></p>
                                 </div>
                            </div>
                        </form>

文件上传代码:

$(function () {

        'use strict';

        var url = $('.form').data('url'); // this is a Google Cloud Storage Upload URL.

        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            acceptFileTypes: /(\.|\/)(gif|jpe?g|bmp|png|svg)$/i,
            maxFileSize: 2 * 1048 * 1048,
            add: function (e, data) {
                $('#files').empty(); // clear file list to show newly added/uploaded files
                $('#errors').empty(); // clear errors
                data.submit();
            },
            done: function (e, data) {
                console.log(data);

                $.each(data.files, function (index, file) {
                    if(data.result[index].error) {
                        $('<div class="alert alert-warning" role="alert"/>').html('<strong>Warning!</strong> '+data.result[index].error).appendTo('#errors');
                    } else {
                        $('<p/>').html('<div class="row"><div class="col-sm-4"><img class="img-responsive thumbnail" src="' + data.result[index].url + '" data-filename="'+data.result[index].filename+'" data-src="'+data.result[index].src+'" data-url="'+data.result[index].url+'"/></div><div class="col-sm-8"><p><i class="fa fa-check fa-2x"></i> ' + data.result[index].filename + ' successfully uploaded!</p><p>Click the thumbnail to add it to the canvas.</p></div></div><hr />').appendTo('#files');
                    }
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.progress-bar').css(
                    'width',
                    progress + '%'
                );
                if (progress == 100){
                    $('#success-message').addClass('well');
                    $('#success-message').html('<h4>Would you like to upload another file or view library?</h4><a href="<?php echo site_url('gallery/upload'); ?>" class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i> Yes, add more images</a> <a class="btn btn-success" href="<?php echo site_url('gallery/'.$previous_type.'/'.$previous_category); ?>"><i class="fa fa-chevron-left"></i> No, go back</a>');
                }
            },
            fail: function(e, data) {
                console.log(e, data);
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');

    });

0 个答案:

没有答案