Como enviar uma imagem para um arquivo PHP usando o Ajax?

minha pergunta é que é possível fazer upload de uma imagem para um servidor usando ajax (jquery)

abaixo está meu script ajax para enviar texto sem recarregar a página

$(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('').fadeIn("slow"); }, success: function(data) { $("#loader_ic").hide(); $("#new_post").prepend(data); $("#poster").val(''); } }) }) }) 

é possível modificá-lo para enviar imagens?

Isso 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(); }); 

É o que você estava procurando?

Aqui está o código que irá enviar várias imagens de uma vez, para uma pasta específica!

O HTML:

 

O 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 "

Successfully Uploaded Images

";

E finalmente, o 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 isto ajude

Código jquery que contém o ajax simples:

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

Elementos HTML que você pode usar qualquer elemento:

  

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 ""; echo " $namedb ".'
'; echo "
$pricedb

"; echo "

 $colordb

"; echo "

";

O caminho fácil