I am having a problem I am not able to send the original name of my images
to the database it is stopping in my function reside.js more precisely where is this _this.output(canvas, outputType, callback);
and this excerpt callback(canvas.toDataURL('image/jpeg', 0.8));
someone could you help me?
html code
<form method="post" action="#" role="form">
<div>
<input type="text" id="nn" name="nome" placeholder="nome">
</div><br>
<div class="progress">
<div id="progresso" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="form-group row">
<div class="col-xs-12">
<input id="imagem" type="file" name="file" accept="image/*" multiple/>
</div>
</div>
</form>
Jquery code
// Iniciando biblioteca
var resize = new window.resize();
resize.init();
// Declarando variáveis
var imagens;
var imagem_atual;
// Quando carregado a página
$(function ($) {
// Quando selecionado as imagens
$('#imagem').on('change', function () {
var nommes = [].map.call(this.files, function(f){ return f.name; });
enviar();
});
});
/*
Envia os arquivos selecionados
*/
function enviar()
{
// Verificando se o navegador tem suporte aos recursos para redimensionamento
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('O navegador não suporta os recursos utilizados pelo aplicativo');
return;
}
// Alocando imagens selecionadas
imagens = $('#imagem')[0].files;
// Se selecionado pelo menos uma imagem
if (imagens.length > 0)
{
// Definindo progresso de carregamento
$('#progresso').attr('aria-valuenow', 0).css('width', '0%');
// Escondendo campo de imagem
$('#imagem').hide();
// Iniciando redimensionamento
imagem_atual = 0;
redimensionar();
}
}
/*
Redimensiona uma imagem e passa para a próxima recursivamente
*/
function redimensionar()
{
// Se redimensionado todas as imagens
if (imagem_atual > imagens.length)
{
// Definindo progresso de finalizado
$('#progresso').html('Imagen(s) enviada(s) com sucesso');
// Limpando imagens
limpar();
// Exibindo campo de imagem
$('#imagem').show();
// Finalizando
return;
}
// Se não for um arquivo válido
if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null))
{
// Passa para a próxima imagem
imagem_atual++;
redimensionar();
return;
}
// Redimensionando
resize.photo(imagens[imagem_atual], 300, 'dataURL', function (imagem) {
// Salvando imagem no servidor
$.post('ajax/salvar.php', {imagem: imagem, 'nome': nommes}, function() {
// Definindo porcentagem
var porcentagem = (imagem_atual + 1) / imagens.length * 100;
// Atualizando barra de progresso
$('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%');
// Aplica delay de 1 segundo
// Apenas para evitar sobrecarga de requisições
// e ficar visualmente melhor o progresso
setTimeout(function () {
// Passa para a próxima imagem
imagem_atual++;
redimensionar();
}, 1000);
});
});
}
/*
Limpa os arquivos selecionados
*/
function limpar()
{
var input = $("#imagem");
input.replaceWith(input.val('').clone(true));
}
resize.js function code
window.resize = (function () {
'use strict';
function Resize() {
//
}
Resize.prototype = {
init: function(outputQuality) {
this.outputQuality = (outputQuality === 'undefined' ? 0.8 : outputQuality);
},
photo: function(file, maxSize, outputType, callback) {
var _this = this;
var reader = new FileReader();
reader.onload = function (readerEvent) {
_this.resize(readerEvent.target.result, maxSize, outputType, callback);
}
reader.readAsDataURL(file);
},
resize: function(dataURL, maxSize, outputType, callback) {
var _this = this;
var image = new Image();
image.onload = function (imageEvent) {
// Resize image
var canvas = document.createElement('canvas'),
width = image.width,
height = image.height;
if (width > height) {
if (width > maxSize) {
height *= maxSize / width;
width = maxSize;
}
} else {
if (height > maxSize) {
width *= maxSize / height;
height = maxSize;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
_this.output(canvas, outputType, callback);
}
image.src = dataURL;
},
output: function(canvas, outputType, callback) {
switch (outputType) {
case 'file':
canvas.toBlob(function (blob) {
callback(blob);
}, 'image/jpeg', 0.8);
break;
case 'dataURL':
callback(canvas.toDataURL('image/jpeg', 0.8));
break;
}
}
};
return Resize;
}());