如何使用Ajax将图像发送到PHP文件？

我的问题是，是否可以使用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('').fadeIn("slow"); }, success: function(data) { $("#loader_ic").hide(); $("#new_post").prepend(data); $("#poster").val(''); } }) }) }) 

---

可以修改它来发送图像吗？

Answer 1

这很有效。

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

这是你在寻找什么？

Answer 2

这是一次将多个图像上传到特定文件夹的代码！

HTML：

 
  Upload Files! 
 
 
  

PHP：

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

最后，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

包含简单ajax的Jquery代码：

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

你可以使用任何元素的Html元素：

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 "

"; 
 简单的方法