Envio de imagens por favor so preciso de um peueno detalhe sobre " delete arr[0] " com o JAVASCRIPT
Tá aqui pessoal eu montei esse codigo doidinho rsrsr, mais ta tudo de boa ele functiona da seguinte forma :
1- o usuário escolhe uma imagem no formulario html, o formulario envia e o javascript exibe a miniaturas até ai ok.
eu coloquei um " X " PARA quando o ususario decidir remover a imagem antes de enviar ele clicka no X e a imagem remove até ai tambem ta funcionando
a questão é a seguinte !
quando o usuario clicka no X a imagem remove mais mesmo assim a imagem removida pelo javascript vai pro banco de dados a unica solução que achei foi com este comando
----> delete arr[2]; mais os usuario nao vão entrar no meu codigo procurar uma array e selecionar o numero da imagem para remover então eu queria colocar essa função neste comando
++++++++ <div data-img="' + x + '">'+x+'<a href="javascript:removeFile('+x+')"> x </a></div>' + "\n"; ++++++++
para uando apertar o X a imagem ser removida !
Muito gráto pelo atenção de todos, e de quem me da essa força boa tarde.
<script type="text/jscript">
var arr = [];
var x = 0;
function pegaArquivos(files){
formdata = false;
if (window.FormData) {
formdata = new FormData();
document.getElementById('btn').style.display = 'none';
}
var li = document.createElement('li');
var list = document.getElementById('img-list');
var i = 0, len = files.length, formdata;
for(; i < len; i++){
var file = files*; *
*
*
*
var img = document.createElement("img"); *
*
img.file = file;*
*
img.width = 75;*
*
img.height = 75;
*
*
**
*
*
**
*
*
**
*
*
**
*
*
arr[x] = file;
*
*
**
*
*
formdata.append('images[]', arr[x]);
*
*
**
var a = document.createElement('a');*
*
a.innerHTML = '<div data-img="' + x + '">'+x+'<a href="javascript:removeFile('+x+')"> x </a></div>' + "\n"; *
*
*
*
**
*
*
**
*
*
*
*
li.appendChild(img);*
*
li.appendChild(a);*
*
list.appendChild(li);
*
*
**
*
*
**
*
*
**
var reader = new FileReader();*
*
reader.onload = (function(aImg) {return function(e) {aImg.src = e.target.result;};})(img);*
*
reader.readAsDataURL(file);*
*
*
*
}*
*
x++;
*
*
**
*
*
**
*
*
**
if (formdata) {*
*
$("#gol").click(function() {
*
*
**
$.ajax({*
*
url: "upload.php",*
*
type: "POST",*
*
data: formdata,*
*
processData: false,*
*
contentType: false,*
*
success: function(res) {*
*
document.getElementById('response').innerHTML = res;*
*
}*
*
});*
*
});*
*
}
*
*
**
*
*
**
}
*
*
**
*
*
function removeFile(x) {
*
*
**
*
*
//delete arr[x];*
*
var el = $('[data-img="' + x + '"]');
*
*
**
// CACA A NUMERACAO DA LISTA ::*
*
el.closest("li").remove();*
*
// PERCORRE A LISTA E REMOVE A NUMERACAO CLICKADA ::*
*
}
*
*
**
</script>
*
*
**
*
*
**
*
*
**
FORMULARIO HTML
*
*
**
*
*
**
<form action="upload.php" enctype="multipart/form-data" method="post">*
*
<input type="file" name="images" id="inputImage" onChange="pegaArquivos(this.files)"/>*
*
<button type="submit" id="btn">Salvar</button>*
*
</form>*
*
<button id="gol">click</button>
*
*
**
*
*
**
*
*
**
*
*
**
*
*
**
*
*
**
*
*
**
*
*
**
*
*
**
*
*
**
*
Discussão (3)
Carregando comentários...