0
我有幾天的時間來研究一些方法來通過插件parsley完成圖像驗證，但不起作用。 我按照這個例子https://jsfiddle.net/02vjbLrs/16。 它工作的一切，但圖像驗證。 有些幫助？歐芹驗證文件圖像不起作用
{!! Form::open(array('url' => 'backend/portfolio', 'id' => 'form', 'name' => 'InserirPortfolio', 'role' => 'form', 'files'=> true, 'class' => 'form-signin', 'data-validate' => 'parsley'))!!}
<div class="row" style="margin-bottom: 20px;">
<div class="col-md-3 col-lg-3">
{!! Form::label('titulo', 'Titulo', ['class' => 'label_perfil']) !!}
</div>
<div class="col-md-9 col-lg-9">
{!! Form::text('titulo', null, [
'class' => 'form-control input-md',
'placeholder' => 'Titulo',
'data-required' => 'true',
'data-required-message' => 'O campo Titulo é obrigatório',
'pattern' => '^[A-Za-zãÃáÁàÀêÊéÉèÈíÍìÌôÔõÕóÓòÒúÚùÙûÛçÇ ]*$',
'data-pattern-message' => 'Só se aceita letras',
'data-minlength' => '3',
'data-minlength-message' => 'O titulo tem de ter 3 caracteres obrigatórios',
'data-maxlength' => '20',
'data-maxlength-message' => 'O titulo não pode conter mais de 20 caracteres',
])
!!}
</div>
</div>
<div class="row" style="margin-bottom: 20px;">
<div class="col-md-3 col-lg-3">
{!! Form::label('ano', 'Ano', ['class' => 'label_perfil']) !!}
</div>
<div class="col-md-9 col-lg-9">
{!! Form::text('ano', null, [
'class' => 'form-control input-md',
'placeholder' => 'Ano',
'data-required' => 'true',
'data-required-message' => 'O campo Ano é obrigatório',
'pattern' => '^[0-9]{4}$',
'pattern-message' => 'Só se aceita números',
]) !!}
</div>
</div>
<div class="row" style="margin-bottom: 20px;">
<div class="col-md-3 col-lg-3">
{!! Form::label('genero', 'Categoria', ['class' => 'label_perfil']) !!}
</div>
<div class="col-md-9 col-lg-9">
{!! Form::select('genero', ['Design' => 'Design', 'Web Design' => 'Web Design', 'Audiovisual' => 'Audiovisual', 'Branding' => 'Branding'], null, [
'class' => 'form-control input-md',
'data-required' => 'true',
'data-required-message' => 'O campo Categoria é obrigatório',
]) !!}
</div>
</div>
<div class="row" style="margin-bottom: 20px;">
<div class="col-md-3 col-lg-3">
{!! Form::label('descricao', 'Descrição', ['class' => 'label_perfil']) !!}
</div>
<div class="col-md-9 col-lg-9">
{!! Form::textarea('descricao', null, [
'class' => 'form-control input-md',
'style' => 'height: 100px; resize: none;',
'placeholder' => 'Descrição',
'data-required' => 'true',
'data-required-message' => 'O campo Descrição é obrigatório',
'pattern' => '^[0-9A-Za-zãÃáÁàÀêÊéÉèÈíÍìÌôÔõÕóÓòÒúÚùÙûÛçÇ. ]*$',
'data-pattern-message' => 'Está algo errado',
'data-minlength' => '10',
'data-minlength-message' => 'A descrição tem de ter 10 caracteres obrigatórios',
'data-maxlength' => '200',
'data-maxlength-message' => 'A descrição não pode conter mais de 200 caracteres',
]) !!}
</div>
</div>
<div class="row" style="margin-bottom: 20px;">
<div class="col-md-3 col-lg-3">
{!! Form::label('imagens', 'Imagem', ['class' => 'label_perfil']) !!}
</div>
<div class="col-md-9 col-lg-9">
{!! Form::file('imagens[]',[
'class' => 'input-file',
'multiple' => true,
'required' => 'required',
'data-parsley-filemaxmegabytes' => '2',
'data-parsley-trigger' => 'change',
'data-parsley-filemimetypes' => 'image/jpeg, image/png'
]) !!}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
{!! Form::submit('Acrescentar portfolio', ['class' => 'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
<script type="text/javascript">
var app = app || {};
// Utils
(function ($, app) {
'use strict';
app.utils = {};
app.utils.formDataSuppoerted = (function() {
return !!('FormData' in window);
}());
}(jQuery, app));
// Parsley validators
(function ($, app) {
'use strict';
window.Parsley
.addValidator('filemaxmegabytes', {
requirementType: 'string',
validateString: function (value, requirement, parsleyInstance) {
if (!app.utils.formDataSuppoerted) {
return true;
}
var file = parsleyInstance.$element[0].files;
var maxBytes = requirement * 1048576;
if (file.length == 0) {
return true;
}
return file.length === 1 && file[0].size <= maxBytes;
},
messages: {
en: 'File is to big'
}
})
.addValidator('filemimetypes', {
requirementType: 'string',
validateString: function (value, requirement, parsleyInstance) {
if (!app.utils.formDataSuppoerted) {
return true;
}
var file = parsleyInstance.$element[0].files;
if (file.length == 0) {
return true;
}
var allowedMimeTypes = requirement.replace(/\s/g, "").split(',');
return allowedMimeTypes.indexOf(file[0].type) !== -1;
},
messages: {
en: 'File mime type not allowed'
}
});
}(jQuery, app));
// Parsley Init
(function ($, app) {
'use strict';
$('#form').parsley();
}(jQuery, app));
</script>