整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          《小白H5成長之路50》js與PHP配合完成圖片上傳功能

          小白!還記得之前我們說過的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) {});


          這里要注意幾點:

          • processData設置為false。因為data值是FormData對象,不需要對數據做處理。
          • <form>標簽添加enctype="multipart/form-data"屬性。
          • cache設置為false,上傳文件不需要緩存。
          • contentType設置為false。因為是由<form>表單構造的FormData對象,且已經聲明了屬性enctype="multipart/form-data",所以這里設置為false。

          上傳后,服務器端代碼需要使用從查詢參數名為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) {});

          這里有幾處不一樣:

          • append()的第二個參數應是文件對象,即$('#file')[0].files[0]。
          • contentType也要設置為‘false’。

          從代碼$('#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);

          }


          主站蜘蛛池模板: 精品一区二区久久久久久久网精| 国产精品综合AV一区二区国产馆| 精品免费久久久久国产一区| 国产乱码一区二区三区四| 国产精品无码不卡一区二区三区| 精品少妇人妻AV一区二区三区| 国产精品熟女一区二区| 中文字幕精品一区| 国产vr一区二区在线观看| 国产品无码一区二区三区在线| 麻豆果冻传媒2021精品传媒一区下载| 精品视频一区二区三区在线观看| 一区二区三区亚洲视频| 视频一区二区中文字幕| 日本一区二区三区不卡在线视频| 狠狠色综合一区二区| 国产高清不卡一区二区| 手机看片一区二区| 国产在线精品一区二区不卡麻豆| 波多野结衣中文一区二区免费| 日本免费一区尤物| 色系一区二区三区四区五区| 天天躁日日躁狠狠躁一区| 精品国产一区二区麻豆| 国产福利在线观看一区二区| 精品国产AV无码一区二区三区 | 少妇激情一区二区三区视频| 国产成人无码AV一区二区在线观看| 亚洲一区精品伊人久久伊人| 国产激情一区二区三区| 日本一区二区三区高清| 一本AV高清一区二区三区| 久久亚洲综合色一区二区三区| 日本欧洲视频一区| 亚洲熟女综合色一区二区三区 | 波多野结衣一区二区三区88| 视频一区在线播放| 精品一区二区久久久久久久网站| 午夜天堂一区人妻| 精品国产免费观看一区| 久久无码精品一区二区三区|