jquery - subir - ¿Cómo enviar imágenes al archivo PHP usando Ajax?

subir una imagen con jquery

Question

mi pregunta es que es posible cargar una imagen a un servidor usando ajax (jquery)

a continuación está mi script ajax para enviar texto sin página de recarga

$(function() {
//this submits a form
$(''#post_submit'').click(function(event) {
event.preventDefault();
var great_id = $("#post_container_supreme:first").attr("class");
var poster = $("#poster").val() ;
$.ajax({
type: "POST",
url: "my php file",
data: ''poster=''+ poster + ''&great_id='' + great_id,
beforeSend: function() {
$("#loader_ic").show();
$(''#loader_ic'').fadeIn(400).html(''<img src="data_cardz_loader.gif" />'').fadeIn("slow");
},
success: function(data) {
$("#loader_ic").hide();
$("#new_post").prepend(data);
$("#poster").val('''');
}
})
})
})

¿Es posible modificarlo para enviar imágenes?

Answer 1

Esto funciona.

$("form[name=''uploader'']").submit(function(e) {
var formData = new FormData($(this)[0]);
$.ajax({
url: "page.php",
type: "POST",
data: formData,
async: false,
success: function (msg) {
alert(msg)
},
cache: false,
contentType: false,
processData: false
});
e.preventDefault();
});

¿Es lo que estabas buscando?

Answer 2

¡Aquí hay un código que cargará múltiples imágenes a la vez, en una carpeta específica!

El HTML:

<form method="post" enctype="multipart/form-data" id="image_upload_form" action="submit_image.php">
<input type="file" name="images" id="images" multiple accept="image/x-png, image/gif, image/jpeg, image/jpg" />
<button type="submit" id="btn">Upload Files!</button>
</form>
<div id="response"></div>
<ul id="image-list">
</ul>

El PHP:

<?php
$errors = $_FILES["images"]["error"];
foreach ($errors as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["images"]["name"][$key];
//$ext = pathinfo($name, PATHINFO_EXTENSION);
$name = explode("_", $name);
$imagename='''';
foreach($name as $letter){
$imagename .= $letter;
}
move_uploaded_file( $_FILES["images"]["tmp_name"][$key], "images/uploads/" . $imagename);
}
}
echo "<h2>Successfully Uploaded Images</h2>";

Y finalmente, el JavaSCript / Ajax:

(function () {
var input = document.getElementById("images"),
formdata = false;
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
}
if (formdata) {
$.ajax({
url: "submit_image.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}
}, false);
}());

Espero que esto ayude

Answer 3

Código de Jquery que contiene ajax simple:

 $("#product").on("input", function(event) {
var data=$("#nameform").serialize();
$.post("./__partails/search-productbyCat.php",data,function(e){
$(".result").empty().append(e);
});
});

Elementos HTML puedes usar cualquier elemento:

 <form id="nameform">
<input type="text" name="product" id="product">
</form>

Código php:

 $pdo=new PDO("mysql:host=localhost;dbname=onlineshooping","root","");
$Catagoryf=$_POST[''product''];
$pricef=$_POST[''price''];
$colorf=$_POST[''color''];
$stmtcat=$pdo->prepare(''SELECT * from products where Catagory =?'');
$stmtcat->execute(array($Catagoryf));
while($result=$stmtcat->fetch(PDO::FETCH_ASSOC)){
$iddb=$result[''ID''];
$namedb=$result[''Name''];
$pricedb=$result[''Price''];
$colordb=$result[''Color''];
echo "<tr>";
echo "<td><a href=./pages/productsinfo.php?id=".$iddb."> $namedb</a> </td>".''<br>'';
echo "<td><pre>$pricedb</pre></td>";
echo "<td><pre> $colordb</pre>";
echo "</tr>";

La manera fácil