溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取

發(fā)布時(shí)間：2020-07-29 14:38:11 來源：網(wǎng)絡(luò) 閱讀：7527 作者：Lee_吉 欄目：web開發(fā)

一、FormData方式

  1. 前臺代碼（注意，不需要用到form標(biāo)簽）：
    a. html部分：
    ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取
    b. js部分：
    ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取
    c. 完整代碼： 
    <input type="file" multiple id="lee_file">
<input type="text" id="lee_text" value="test">
<input type="button" value="Upload" id="lee_button">
<script>
function loadDoc(file,data,async=true){
if(window.XMLHttpRequest){  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}else{  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(async === true){
  xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState < 4){
          // 加載中
      }else if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
          // 成功
          xmlDoc=xmlhttp.responseText;
          return xmlDoc
      }else{
          // 失敗
          xmlhttp.abort()
          return
      }
  }
}
xmlhttp.open("POST",file,async);
xmlhttp.send(data);
if(async === false){
  xmlDoc=xmlhttp.responseText;
  return xmlDoc
}
}
function getEle(id){
var ele = document.getElementById(id)
return ele
}
function sendFile() {
var lee_file = getEle('lee_file');
var lee_text = getEle('lee_text');
var form_data = new FormData();
for (var i in lee_file.files) {
form_data.append('pics[]', lee_file.files[i]);
}
form_data.append('text', lee_text.value);
loadDoc('test.php',form_data)
}
var lee_button = getEle('lee_button');
lee_button.onclick = function(){
sendFile()
}
</script>
  2. php獲?。ㄓ?$_FILE 獲?。?br/>ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取
    完整代碼： 
    <?php
header('Access-Control-Allow-Origin: *');
var_dump($_POST);
var_dump($_FILES);

    二、FileReader+FormData+base64

  3. 前臺代碼：
    a. html代碼：
    ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取
    b. js代碼：
    ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取
    c. 完整代碼： 
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title></head>
<body>
<form>
<input type="file" multiple id="lee_file">
<input type="button" value="上傳圖片" id="lee_button">
<img src="" alt="" id="lee_img">
</form>
<script>
function loadDoc(file,data,async=true){
if(window.XMLHttpRequest){  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}else{  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(async === true){
  xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState < 4){
          // 加載中
      }else if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
          // 成功
          xmlDoc=xmlhttp.responseText;
          return xmlDoc
      }else{
          // 失敗
          xmlhttp.abort()
          return
      }
  }
}
xmlhttp.open("POST",file,async);
xmlhttp.send(data);
if(async === false){
  xmlDoc=xmlhttp.responseText;
  return xmlDoc
}
}
function getEle(id){
var ele = document.getElementById(id)
return ele
}
lee_button = getEle('lee_button')
function sendFile() {
var lee_file = getEle('lee_file').files;
var lee_text = getEle('lee_text');
for (var i = 0; i < lee_file.length; i++) {
  file = lee_file[i];
  var form_data = new FormData();
  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = function() { // onload代表文件讀取成功
    getEle('lee_img').setAttribute('src',reader.result);
    form_data.append('pic', reader.result);
    loadDoc('test.php',form_data)
  }
}
}
lee_button.onclick = function() {
sendFile();
}
</script>
</body>
</html>
  4. php代碼（用 $_POST 獲?。?br/>a. 允許跨域：
    ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取
    b. 將前臺post過來的數(shù)據(jù)保存為臨時(shí)文件：
    ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取
    c. 獲取文件真實(shí)后綴函數(shù)：
    ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取
    d. 將臨時(shí)文件保存為帶真實(shí)后綴的文件：
    ajax利用FormData、FileReader實(shí)現(xiàn)多文件上傳php獲取
    e. 完整代碼： 
    <?php
header('Access-Control-Allow-Origin:*');  
/*
* 將流文件保存為臨時(shí)文件
* @param   stream  base64輸入流
* @param   tmpname 臨時(shí)文件路徑
*/  
function uploadBase64($stream) {
    if (empty($stream)) return false;
    if (preg_match('/^(data:(\s)?(image|img)\/(\w+);base64,)/', $stream, $str)) {
        $suffix = "tmp";
        $tmpname = rand(1000, 9999) . ".{$suffix}";
        if (file_put_contents($tmpname, base64_decode(str_replace($str[1], '', $stream)))) {
            return $tmpname;
        } else {
            return false;
        }
    } else {
        return false;
    }
} 
/*
獲取圖片真實(shí)后綴
@param   filename    文件名
@param   suffix      文件真實(shí)后綴（.jpg .png .gif）
*/   
function getSuffix($fileName) {
$file = fopen($fileName, "rb");
$bin = fread($file, 2); // 只讀2字節(jié)
fclose($file);
$strInfo = @unpack("C2chars", $bin);
$typeCode = intval($strInfo['chars1'] . $strInfo['chars2']);
$suffix = "unknow";
if($typeCode == 255216){
    $suffix = "jpg";
}elseif($typeCode == 7173){
    $suffix = "gif";
}elseif($typeCode == 13780){
    $suffix = "png";
}elseif($typeCode == 6677){
    $suffix = "bmp";
}elseif($typeCode == 7798){
    $suffix = "exe";
}elseif($typeCode == 7784){
    $suffix = "midi";
}elseif($typeCode == 8297){
    $suffix = "rar";
}elseif($typeCode == 7368){
    $suffix = "mp3";
}elseif($typeCode == 0){
    $suffix = "mp4";
}elseif($typeCode == 8273){
    $suffix = "wav";
}
return $suffix;
}
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手