如何使用Ajax將圖像發送到PHP文件？

Question

我的問題是有可能的圖像上傳到使用服務器AJAX（jQuery的）

下面

是我的AJAX腳本發送文本，而不重新加載頁面

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

    }) 
}) 
}) 

---

是有可能修改它發送圖像？

Answer 1

This Works。

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

是你在尋找什麼？

Answer 2

這裏是將多個圖像一次上傳到特定文件夾的代碼！

的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> 

的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>"; 

最後，由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); 
}()); 

希望這有助於它包含

Answer 3

jQuery代碼簡單的阿賈克斯：

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

    }); 


    }); 

HTML元素，你可以使用任何元素：

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

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

最簡單的辦法