如何使用php+ajax+h5實(shí)現(xiàn)圖片上傳功能

發(fā)布時(shí)間：2021-07-08 09:17:51 來源：億速云閱讀：193 作者：小新欄目：開發(fā)技術(shù)

這篇文章主要介紹如何使用php+ajax+h5實(shí)現(xiàn)圖片上傳功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

具體內(nèi)容如下

html頁面代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.11.0.js"></script>

</head>
<body>
<form class="form-horizontal" role="form" id="myForm"
   action="/index/fileupsend" method="post"
   enctype="multipart/form-data">

  選擇文件:<input type="file" id="file1" /><br />
  <input type="button" id="upload" value="上傳" />
  <span id="imgWait"></span>
</form>
<script>
  $(function () {
    $("#upload").click(function () {
      $("#imgWait").html("上傳中");
      var formData = new FormData();
      formData.append("myfile", document.getElementById("file1").files[0]);
      $.ajax({
        url: "/Home/index/fileupsend",
        type: "POST",
        data: formData,
        /**
         *必須false才會(huì)自動(dòng)加上正確的Content-Type
         */
        contentType: false,
        /**
         * 必須false才會(huì)避開jQuery對(duì) formdata 的默認(rèn)處理
         * XMLHttpRequest會(huì)對(duì) formdata 進(jìn)行正確的處理
         */
        processData: false,
        success: function (data) {
          if(data){
            alert("上傳成功！");
          }
          $("#imgWait").html("上傳成功");

        },
        error: function () {
          alert("上傳失?。?quot;);
          $("#imgWait").hide();
        }
      });
    });
  });
</script>
</body>
</html>

php代碼

public function fileupsend(){
  $type_pic = $this->file_upload('1',array('jpg', 'gif', 'png', 'jpeg'),'filetest','myfile');
  echo $type_pic['img_path'];

}

以上是“如何使用php+ajax+h5實(shí)現(xiàn)圖片上傳功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

如何使用php+ajax+h5實(shí)現(xiàn)圖片上傳功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽