jq上傳文件的方法


 

  總的來說和原生XHR上傳差不多,就是JQ有一個屬性會幫助怎們進行編碼,因為文件傳輸要遵循長文本HTTP規范,只有編碼后才能傳輸

  我是把便把過程放在form這一塊了 因為form表單有 enctype 這個屬性,這只了就可以幫助咱們把文件進行編碼了,如果JQ再一次的編碼,那就麻煩了

    所以總結一下:如果你的form里面寫了 enctype="multipart/form-data" JQ中這兩個屬性就要這樣寫processData: false,  contentType: false 

           如果你的form表單沒有使用 enctype="multipart/form-data" JQ就要這樣寫  

          processData: false, //jquery 是否對數據進行 預處理
                contentType: "multipart/form-data" // 不要自己修改請求內容類型

 

 

 

話不多說直接上代碼

  

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <form id="form1" action="" method="post" enctype="multipart/form-data"> // encype 是文件轉碼
            <input type="file" name="upfile" id="upfile" value="" />
            <input type="button" value="上傳" id="btn"/>
        </form>
    </body>
    <script type="text/javascript"> $("#btn").click(function(){ var formData = new FormData(); formData.append("pic",document.getElementById("upfile").files[0]); $.ajax({ type: "POST", // 數據提交類型
 url: "upfile.php", // 發送地址
 data: formData, //發送數據
 async: true, // 是否異步
 processData: false, //processData 默認為false,當設置為true的時候,jquery ajax 提交的時候不會序列化 data,而是直接使用data
 contentType: false //  }); }); </script>
</html>

 

php代碼

<?php
    if(!empty($_FILES)){
        echo "來了";
        moveFile($_FILES["pic"]);
    }
        //將文件移動到指定的目錄下相對目錄
        function moveFile($upload){
            if(!is_dir("images")){     // is_dir(file)函數判斷指定的文件夾是否存在 file 是一個相對路徑
                    mkdir("images");         // mkdir()函數創建文件夾
             }
              if(is_uploaded_file($upload['tmp_name'])){   // 判斷上傳是不是通過HTTP POST上傳的
                $str=stristr($upload['name'],'.');         // 獲取文件后綴名稱
                $path="images/".$upload["name"];   // 定義上傳文件的存儲位置
                if(move_uploaded_file($upload['tmp_name'],$path)){   // 執行文件上傳操作
                      return $path;  // 返回文件路徑
                }else{
                    return false; //上傳不成功返回false
                }
             }
        }
?>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM