用ajax+php實現前端頁面上的檔案（圖片）、內容上傳至資料庫

阿新 • • 發佈：2021-01-20

1.首先是前端的頁面這裡放了主要的form表單內容

<form id="form">
        <input name="names" type="text" placeholder="你的名字">
        <input name="college" type="text" placeholder="你的學院">
        <input name="home" type="text" placeholder="你的家鄉">
        <input name="qq"  class="ipt" type="text" placeholder="你的QQ">
        <input name="tel"  class="ipt" type="text" placeholder="你的電話">
        <input name="texts" maxlength="150" type="text" placeholder="你眼中的家鄉(150字以內)" id="text"></input>
        <input name="picture" multiple type="file">
        <button type="button" id="submit">提交</button>
    </form>

2.然後是js操作這裡包括瞭如何將file檔案獲取到，然後如何傳入php
（jq操作獲取到DOM物件，然後用ajax傳入php）

<script>
    // 獲取所有文字輸入框
    var inputTextArr = $('input[type=text]')
    $('#submit').click(function () {
        
      var formData = new FormData()
      // 迴圈文字輸入框將資訊寫入formdata
      inputTextArr.each(function (i, el) {
        formData.append($(el).attr('name'), $(el).val())
      })      
      // 獲取圖片寫入formdata
      var files = $('input[name=picture]')[0].files
      for (var i = 0; i < files.length; i ++) {
        // formData.append('imgs[]', files[i])  // 合併到一個欄位提交
        formData.append('imgs'+i, files[i]) // 用多個欄位提交
      }
      // 檔案數量 可選
      formData.append('img_count', files.length)
      // 提交
      $.ajax({
        url: './php/index.php',
        type: 'post',
        data: formData,
        processData: false,
        contentType: false,
        success: function(res, status, xhr) {
          console.log(res)
          alert('ajax成功');
        },
        error: function(xhr, status, error) {
            alert('no');

        }
      })
    })
</script>

3.php檔案中除了獲取檔案，其他的內容獲取都很簡單，只需要$_POST獲取就可以了還有這個系統其實是報名單，所以獲取到的圖片或檔案進行了重新命名為每個人的資訊。

<?php
header("Content-Type；text/html;charset=utf-8");

$con=mysqli_connect("localhost", "root", "123456", "d1");
$program_char="utf8";
mysqli_set_charset($con,$program_char);
if(mysqli_connect_errno($con)){
    echo "連線資料庫失敗".mysqli_connect_error();
}



$names = $_POST['names']; 
$college = $_POST['college'];
$home = $_POST['home'];
$tel = $_POST['tel'];
$texts= $_POST['texts'];
$qq= $_POST['qq'];
$files = $_FILES;

$picture = [];
$static_path = dirname(__DIR__) . '/photos/';
// 目錄不存在則建立
if (!file_exists($static_path)) {
    mkdir($static_path);
}
// 遍歷接收檔案
// 這裡是以一個圖片一個欄位上傳的
$count=0;
foreach ($files as $img) {
    // 生成一個hash
    //$hash = md5(time().rand(1000, 9999));
    // // 檔案字尾
    $ext = array_reverse(explode('.', $img['name']))[0];
    // // 檔名hash+字尾
    //$filename = $hash.'.'.$ext;
    $filename=$names.'-'.$tel.'-'.$count.'-'.'.'.$ext;
    $count++;
    $filepath = $static_path.$filename;
    // 儲存檔案
    move_uploaded_file($img['tmp_name'], $filepath);
    // 儲存路徑到圖片路徑陣列
    array_push($picture, $filepath);
}

var_dump($picture);

// 用逗號連線圖片路徑，作為一個欄位寫入資料庫
$picture_text = implode(',', $picture);
// 用逗號連線圖片路徑，作為一個欄位寫入資料庫
$picture_text = implode(',', $picture);
// sql語句
/*
$sql = sprintf("insert into `article`
    (`name`, `college`, `home`, `text`,`tel`,`qq`, `imgs`, `create_time`) 
    values ('%s', '%s', '%s', '%s', '%s', '%s','%s','%s')",
    $name, $college, $home, $text, $tel,$qq,$picture_text, date('Y-m-d H:i:s'));

var_dump($sql);
*/

$sql2="INSERT INTO article(names,college,home,texts,tel,qq,imgs) VALUES('$names','$college','$home','$texts','$tel','$qq','$picture_text')";

//$sql1="INSERT INTO article(names,college) VALUES('$name11','$college1')";
$result=mysqli_query($con,$sql2);
if (!$result) {
    printf("Error: %s\n", mysqli_error($con));
    exit();
}
// mysqli_query('', ')
?>