如何使用 Ajax 将图像发送到 PHP 文件？
Posted
技术标签:
【中文标题】如何使用 Ajax 将图像发送到 PHP 文件？【英文标题】：How to send image to PHP file using Ajax? 【发布时间】：2014-02-05 12:17:49 【问题描述】：我的问题是是否可以使用 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('');
)
)
)
是否可以修改它以发送图像？
【问题讨论】：
试试这个：data: poster : poster, great_id : great_id ,
是的，你可以。但我只会使用像fine-uploader这样的插件
jai这是修改发送图片吗？
查看这篇可能对您有帮助的文章。 phparticles.com/ajax/…
【参考方案1】：
使用 javascript 的 formData API 并将 contentType 和 processData 设置为 false
$("form[name='uploader']").on("submit", function(ev)
ev.preventDefault(); // Prevent browser default submit.
var formData = new FormData(this);
$.ajax(
url: "page.php",
type: "POST",
data: formData,
success: function (msg)
alert(msg)
,
cache: false,
contentType: false,
processData: false
);
);
【讨论】：
这会将表单的所有数据发送到page.php，甚至是您上传的文档，但我不知道如何修改它以在formData中设置额外的参数。 只要确保您支持的浏览器启用了此功能。请参阅developer.mozilla.org/en-US/docs/Web/API/… 确定。 是否支持像 这样的多张图片 服务器端如何处理？ var formData = new FormData($(this)[0]);那不是 var formData = new FormData(this);【参考方案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);
());
希望对你有帮助
【讨论】：
【参考方案3】：在一个 Ajax 请求中通过 Ajax 发布多个文本输入和多个文件
HTML
<form class="form-horizontal" id="myform" enctype="multipart/form-data">
<input type="text" name="name" class="form-control">
<input type="text" name="email" class="form-control">
<input type="file" name="image" class="form-control">
<input type="file" name="anotherFile" class="form-control">
Jquery 代码
$(document).on('click','#btnSendData',function (event)
event.preventDefault();
var form = $('#myform')[0];
var formData = new FormData(form);
// Set header if need any otherwise remove setup part
$.ajaxSetup(
headers:
'X-CSRF-TOKEN': $('meta[name="token"]').attr('value')
);
$.ajax(
url: "route('sendFormWithImage')",// your request url
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function (data)
console.log(data);
,
error: function ()
);
);
【讨论】：
感谢您的代码有效！将文本和图像都发布到 php 文件中。【参考方案4】：包含简单 ajax 的 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>";
简单的方法
【讨论】：
【参考方案5】：<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function ()
$('#abc').on('submit', function (e)
e.preventDefault();
$.ajax(
url: 'post.php',
method:'POST',
data: new FormData(this),
contentType: false,
cache:false,
processData:false,
success: function (data)
alert(data);
location.reload();
);
);
);
</script>
</head>
<body>
<form enctype= "multipart/form-data" id="abc">
<input name="fname" ><br>
<input name="lname"><br>
<input type="file" name="file" required=""><br>
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
【讨论】：
以上是关于如何使用 Ajax 将图像发送到 PHP 文件？的主要内容，如果未能解决你的问题，请参考以下文章
通过 jQuery + Ajax 将带有 Google reCaptcha v2 令牌的图像文件发送到 PHP
将裁剪的图像发送到数据库 ajax 在客户端和服务器上的 PHP