Well, I'm having trouble trying to get the value of input of type file via jQuery. Basically, I selected the input to assign it a .click() event, after that I try to get the input value, but in reality not even open the file selection window it opens.
JS
$(function(){
nome_img = $('#nome_img');
complemento_img = $('#complemento_img');
nome_img.text("Sem imagem");
complemento_img.text("Clique aqui para selecionar uma imagem");
$('#areaupload').click(function () {
$('#foto').click(function () {
var arquivo = $(this).val();
if ( arquivo != " ") {
nome_img.text(arquivo);
complemento_img.text("Arquivo selecionado");
}
else
{
//
}
});
});
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Nova Notícia</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/skin-light.css">
<link rel="stylesheet" type="text/css" href="css/easyeditor.css">
<!-- FONT -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<!-- JS -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyeditor.js"></script>
<script type="text/javascript">
$(function () {
new EasyEditor('#editor');
nome_img = $('#nome_img');
complemento_img = $('#complemento_img');
nome_img.text("Sem imagem");
complemento_img.text("Clique aqui para selecionar uma imagem");
$('#areaupload').click(function () {
$('#foto').click(function () {
var arquivo = $(this).val();
if ( arquivo != " ") {
nome_img.text(arquivo);
complemento_img.text("Arquivo selecionado");
}
else
{
//
}
});
});
$("#publicar > a").click(function (e) {
e.preventDefault();
var titulo = $('#titulo');
var noticia = $('#noticia');
if ( (titulo == "") || (noticia == "") ) {
alert('Por favor, todos os campos devem ser preenchidos.');
return false;
}
});
});
</script>
</head>
<body>
<div class="wrap clearfix">
<!-- row -->
<div class="row">
<div class="window" style="margin-top: 7.0em; width: 70% !important;">
<div class="slice" style="padding: 20px 9px;">
Criar notícia
</div>
<!-- Editor -->
<div id="editor">
</div>
<!-- Fim editor -->
<!-- Upload -->
<div id="upload">
<div id="areaupload">
<section id="nome_img"></section>
<section id="complemento_img"></section>
</div>
<input type="file" id="foto">
</div>
<!-- Fim upload -->
<div class="buttons clearfix">
<div class="button_line" id="publicar">
<a href="">Publicar</a>
</div>
<div class="button_line" id="limpar">
Limpar
</div>
</div>
</div>
</div>
<!-- fim da row -->
</div>
</body>
</html>