整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
小白！還記得之前我們說過的jQuery中的ajax異步加載數據的方法么？”
“記得，之前的代碼我這里還有，你看看是不是這個？”
老朱：“恩，沒錯，通過ajax向圖片上傳的頁面把昨天獲取到的圖片base64編碼發送過去，php頁面就可以把圖片存儲到服務器上。”
小白：“可是我不會php啊！這怎么辦？”
老朱：“沒關系，你不用了解php是怎么把圖片存到服務器上的，只需要知道把圖片發送給圖片上傳的php頁面->處理返回結果就可以了。為了更好的了解這個功能你可以看一下這個php頁面的結構。”
“通過$base64_image_content獲取發送過來的圖片base64編碼信息，然后把圖片存到服務器上，如果存儲成功則成功標識sucess為1并返回圖片地址imgurl，存儲失敗的話就把success設置為0。”
老朱接著說道：“現在我們與圖片上傳的頁面進行ajax通信試試。這個頁面跟當前圖片上傳的html頁面是同級目錄，所以url里面直接使用php頁面名稱（upload.php）就可以了。”
“注意data里面發送的變量參數名稱myimg要跟php頁面里面POST中的名稱一致，fr.result就是我們昨天拿到的圖片base64編碼。現在我們執行以下頁面看看能不能上傳圖片。”
“返回的json數據中success值為1說明圖片已經上傳到服務器上了。”
小白：“假如我把之前我們做的提示信息控件引入，通過返回的success信息就可以提示用戶圖片上傳是否成功了吧！稍等我在這個基礎上改改。”
老朱：“恩，做的不錯，圖片上傳成功以后返回的success狀態和圖片地址非常重要，由于圖片上傳是一個異步過程，因此等圖片上傳完成以后我們需要根據success狀態和圖片地址做后續的操作。”
“圖片上傳的整個流程我們現在已經都準備好了，通過canvas對圖片做壓縮后上傳圖片只需要在現在這個基礎上增加canvas處理就可以了，這塊我們明天接著討論，你今天先把圖片上傳的整個流程再熟悉一下吧。”
異步加載（小白html5成長之路26）、提示信息控件（小白html5成長之路35）、圖片上傳（小白html5成長之路48、49與本節連續）。本節js完整代碼如下：
想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！
ormData對象，是可以使用一系列的鍵值對來模擬一個完整的表單，然后使用XMLHttpRequest發送這個"表單"。
在 Mozilla Developer 網站 使用FormData對象 有詳盡的FormData對象使用說明。
但上傳文件部分只有底層的XMLHttpRequest對象發送上傳請求，那么怎么通過jQuery的Ajax上傳呢？本文將介紹通過jQuery使用FormData對象上傳文件。
HTML代碼
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
javascript代碼
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {}).fail(function(res) {});
這里要注意幾點：
上傳后，服務器端代碼需要使用從查詢參數名為file獲取文件輸入流對象，因為<input>中聲明的是name="file"。
如果不是用<form>表單構造FormData對象又該怎么做呢？
使用FormData對象添加字段方式上傳文件
HTML代碼
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button></div>
這里沒有<form>標簽，也沒有enctype="multipart/form-data"屬性。
javascript代碼
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {}).fail(function(res) {});
這里有幾處不一樣：
從代碼$('#file')[0].files[0]中可以看到一個<input type="file">標簽能夠上傳多個文件，只需要在<input type="file">里添加multiple或multiple="multiple"屬性。
端頁面：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="./uploadfile.css" rel="stylesheet">
<script src="./jquery.min.js"></script>
<script src="./jquery.uploadfile.min.js"></script>
</head>
<body>
<img class="imgPreview" width="80px" height="80px" style="display: none"/>
<div id="mulitplefileuploader">上傳</div>
<div id="status"></div>
<script>
$(document).ready(function (){
var settings = {
url: "upload.php",
dragDrop: true,
fileName: "myfile",
allowedTypes: "jpg,png,gif,doc,pdf,zip",
returnType: "json",
onSuccess: function (files, data, xhr){
$('.imgPreview').show();
$('.imgPreview').attr('src','uploads/'+data);
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
