我正在尝试使用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');
});