como enviar a imagem através do jquery
Nos últimos dias tenho andado a esforçar-me para apresentar um formulário com o jquery e o ajax. O problema que estou enfrentando é carregar a imagem no campo Formulário
A minha forma é algo assim.
<form action="#" method="GET" role="form" enctype="multipart/form-data">
<input type="text" placeholder="Name" name="name">
<input type="file" name="img" multiple>
<button type="submit">Submit </button>
</form>
e o meu script jquery para obter o valor da forma é algo parecido com isto
$("form").submit(function (event) {
$.dataArray = $(this).serializeArray(); // array of form data
console.log($.dataArray);
event.preventDefault();
});
mas isto devolve todo o valor do campo excepto a imagem um no caso de a imagem ser nula. como eu guardo no dataarray ?? eu quero armazenar para que eu possa enviar o valor para o servidor através do FORUM alguém pode ajudar-me, por favor, obrigado!
1
6 answers
Tenta este código, é trabalho para mim.
$("form").submit(function (event) {
var form_data = new FormData($(this));
$.ajax({
url : url,
type : 'POST',
data : form_data,
processData: false, // tell jQuery not to process the data
contentType: false,
success : function(resp){
}
});
});
0
Author: Hitesh Vala Ahir, 2017-05-31 11:54:00
Tenta este código. Utilização
formData()
$("form").submit(function (event) {
var formData = new FormData($(this));
$.ajax({
url: url,
type: 'POST',
data: formData,
async: false,
success: function (data) {
//success callback
},
cache: false,
contentType: false,
processData: false
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="GET" role="form" enctype="multipart/form-data">
<input type="text" placeholder="Name" name="name">
<input type="file" name="img" multiple>
<button type="submit">Submit </button>
</form> 0
Author: Dinesh undefined, 2017-05-31 11:54:20
O método Serialize () não é capaz de publicar dados de ficheiros.
Para enviar um ficheiro usando o ajax use o FormData em vez de serializar
HTML5 introduz o FormData para permitir que os desenvolvedores construam objetos de formulários dinamicamente, e então para enviar este objeto de formulário através do AJAX.
O Seu Html
<form action="upload_image.php" id="form_img" method="GET" role="form" enctype="multipart/form-data">
<input type="text" placeholder="Name" name="name">
<input type="file" name="img" multiple>
<button type="submit">Submit </button>
</form>
Chamada AJAX
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form_img").submit(function(e){
e.preventDefault();
var formData = new FormData($("#form_img")[0]);
$.ajax({
url : $("#form_img").attr('action'),
type : 'POST',
data : formData,
contentType : false,
processData : false,
success: function(resp) {
console.log(resp);
}
});
});
});
</script>
Upload_image.php
print_r($_FILES) //check you get file data or not
0
Author: Nidhi, 2017-05-31 11:54:36
Por favor, verifique o código, que estou a usar para carregar a imagem.
$.ajax({
url: UPLOADURL, // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this),// Data sent to server, a set of key/value pairs representing form fields and values
contentType: false,// The content type used when sending data to the server. Default is: "application/x-www-form-urlencoded"
cache: false,// To unable request pages to be cached
processData:false,// To send DOMDocument or non processed data file it is set to false (i.e. data should not be in the form of string)
success: function(data)// A function to be called if request succeeds
{
data = JSON.parse(data);
console.log(data);
if(data.status == "Success"){
attachmentListing();
//$("#mailerMessage").html(data.data.mailStatus);
//$("#mailerMessage").fadeIn();
setTimeout(function () {
$("#mailerMessage").fadeOut();
},5000);
}else{
toastr.warning(data.status);
}
$("#ajaxloader").addClass("hideajaxLoader");
},
error: function (jqXHR, errdata, errorThrown) {
log("error");
$("#ajaxloader").addClass("hideajaxLoader");
}
});
0
Author: Deepak Patil, 2017-05-31 12:17:07
Para enviar uma única imagem é assim
<html>
<head>
<meta charset="UTF-8">
<title>AJAX image upload with, jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$('#upload').on('click', function () {
var file_data = $('#file').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: 'http://localhost/ci/index.php/welcome/upload', // point to server-side controller method
dataType: 'text', // what to expect back from the server
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (response) {
$('#msg').html(response); // display success response from the server
},
error: function (response) {
$('#msg').html(response); // display error response from the server
}
});
});
});
</script>
</head>
<body>
<p id="msg"></p>
<input type="file" id="file" name="file" multiple />
<button id="upload">Upload</button>
</body>
</html>
Para várias imagens u terá que fazer um loop diferente
0
Author: Racoon, 2017-07-29 16:08:31
Encontrei uma pergunta semelhante, espero que te ajude.
Outra opção a considerar é usar algum tipo de 'plugin' do jQuery para enviar imagens como a Cloudinary e incluí-la nas suas páginas HTML:
<script src='jquery.min.js' type='text/javascript'></script>
<script src='jquery.cloudinary.js' type='text/javascript'></script>
E depois incluir todos os ficheiros jQuery necessários:
<script src='jquery.min.js' type='text/javascript'></script>
<script src='jquery.ui.widget.js' type='text/javascript'></script>
<script src='jquery.iframe-transport.js' type='text/javascript'></script>
<script src='jquery.fileupload.js' type='text/javascript'></script>
<script src='jquery.cloudinary.js' type='text/javascript'></script>
0
Author: Dina Kaiser, 2017-08-06 12:13:39