Ajax（使用 jQuery，php）非同步上傳圖片（二進位制流）儲存到新浪雲平臺storage
這兩天實現了一個釋出圖片的功能，可謂是一波三折，bug不斷啊，趁剛搞定，趕緊把過程寫下來，順便把程式碼傳過來。記錄了圖片在本地的儲存和
將本地的圖片以二進位制流提交到後臺php檔案
在html檔案中的操作自然就是在表單form元素中新增屬性 enctype="multipart/form-data"，將其轉成二進位制流，然後就是input type="file"元素將其提交到PHP後臺。而在PHP檔案中則是$file1 = $_FILES['你的圖片name值'];來獲取你的二進位制流資料，filesize($file1['name'])>3*1024
將本地的圖片儲存在資料庫中
由於我主要是儲存在雲平臺，所以在這就列出一些可行的操作連結
儲存圖片路徑到資料庫中，並根據路徑顯示圖片https://segmentfault.com/a/1190000015750653
將圖片本身儲存在資料庫中，並取出圖片顯示https://www.cnblogs.com/Skrillex/p/7541885.html
將本地的圖片儲存在雲平臺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);
}實現效果圖
參考連結：https://blog.csdn.net/qq_16148137/article/details/51853886
https://blog.csdn.net/u014205965/article/details/46655609