这两天实现了一个发布图片的功能，可谓是一波三折，bug不断啊，趁刚搞定，赶紧把过程写下来，顺便把代码传过来。记录了图片在本地的存储和
将本地的图片以二进制流提交到后台php文件
在html文件中的操作自然就是在表单form元素中添加属性enctype="multipart/form-data"，将其转成二进制流，然后就是input type="file"元素将其提交到PHP后台。而在PHP文件中则是$file1 =$_FILES['你的图片name值'];来获取你的二进制流数据，filesize($file1['name'])>3*1024y用来控制图片的大小（3MB），move_uploaded_file($file1['tmp_name'], $file1Path);用来转存你的图片到$file1Path此路径，以此实现图片的在本地的转存。
将本地的图片保存在数据库中
由于我主要是保存在云平台，所以在这就列出一些可行的操作链接
保存图片路径到数据库中，并根据路径显示图片/a/1190000015750653
将图片本身保存在数据库中，并取出图片显示/Skrillex/p/7541885.html
将本地的图片保存在云平台storage
首先，在新浪云平台中，有个storage存储服务（Storage是分布式文件存储服务，用来存放持久化存储的文件。支持文本、多媒体、二进制等任何类型的数据的存储）（创建了自己应用的基础上再创建该服务）
创建好之后就是使用php来连接到你的storage存储空间
连接成功以后就可以通过表单二进制流数据的形式将图片文件存储到你的storage空间中。请看完整代码
html文件
<!DOCTYPE HTML><html><head><title></title><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1"></head><body><form action="测试文件3上传文件.php" method="POST" enctype="multipart/form-data" class="uploadImageForm"><input type="file" name="file" id="file" /><input type="submit" value="Submit" name="submit"/></form></body></html>
php文件：测试文件3上传文件.php
<?php // 当用户点击submit提交上传的文件时if(isset($_POST["submit"])){// 创建SAE storage存储$storage= new SaeStorage();// 创建SAE storage存储对象$domain = 'mybucket';// 这里的$domain对应得名字就是自己起的名字$fileType = $_FILES["file"]["type"]; //被上传文件的类型if(($fileType=="image/gif") || ($fileType=="image/jpeg")||($fileType=="image/jpg")||($fileType=="image/png")){$filename = $_FILES["file"]["name"];$storage->upload( $domain,$filename,$_FILES[file][tmp_name]); echo "图片上传成功"; }else{echo "'上传失败！请选择图片格式！";}}?>
至此完成了图片通过表单提交到storage空间的操作。
我更多的希望可以使用Ajax异步的上传图片，这样的用户体验更好
操作：选择需要上传的图片，点击上传按钮后，将上传的图片存储在storage
实现流程：将submit提交按钮换成普通的按钮，给提交按钮绑定点击事件，在点击事件中，使用FormData类获取表单对象，使用Ajax将表单对象数据异步提交到后台。
部分代码：
表单（注意：enctype="multipart/form-data" 二进制流数据，提交按钮改成普通按钮）
<form name="myForm" id="myForm" action="MY空间后台.php" method="post" enctype="multipart/form-data"><input type="file" name="file" id="selectPhoto" class="col-md-2 uploadButton"/><input type="button" name="submit" value="submit" id="submit"/></form>
绑定点击事件
$(document).ready(function(){$('#submit').bind('click',submit);});
Ajax异步刷新操作函数（注意：var formData=new FormData($('#myForm')[0]);Ajax传文件格式，注意格式！ processData: false contentType: false必填）
function submit(){var formData=new FormData($('#myForm')[0]);//Ajax传文件格式$.ajax({url:"MY空间后台.php",type:"POST",data:formData,//提交表单数据success:returnData,//回调函数processData: false, contentType: false,async:true});}function returnData(Data){alert(Data);}
实现效果图
参考链接：/qq_16148137/article/details/51853886
/u014205965/article/details/46655609
![[2024年]初二学生的700字作文：他们的心声与思考](https://700zi.400zi.cn/uploadfile/img/2024/05/28/55d4bf4e409708dd8e22140fc599e2a8.jpg)
