js上传图片并传给php保存举例
时间: 2023-12-20 20:07:12 浏览: 44
好的,这个问题是与技术相关的,我可以尝试来回答。首先,您需要在前端使用JavaScript编写代码来实现图片上传功能。可以通过FileReader对象将图片读取成DataURL,然后通过XMLHttpRequest对象将DataURL发送给后端的PHP脚本进行保存。在PHP脚本中,可以使用file_put_contents函数将接收到的图片数据保存到服务器上的文件中。具体实现代码可以参考以下示例:
前端代码:
```
<input type="file" id="fileInput">
<button onclick="uploadImage()">上传</button>
<script>
function uploadImage() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var imageData = event.target.result;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'saveImage.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send('image=' + encodeURIComponent(imageData));
};
reader.readAsDataURL(file);
}
</script>
```
后端代码(saveImage.php):
```
<?php
$imageData = $_POST['image'];
$imageData = str_replace('data:image/png;base64,', '', $imageData);
$imageData = str_replace(' ', '+', $imageData);
$image = base64_decode($imageData);
file_put_contents('images/image.png', $image);
echo '上传成功';
?>
```
注意,为了减小数据传输量,前端将图片数据编码成了DataURL形式。后端通过base64_decode函数将其解码成二进制图片数据,并保存到服务器上的文件中。这里的上传路径为images/image.png,可以根据需要进行修改。