用ajax+php实现前端页面上的文件（图片）、内容上传至数据库

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('', ')
?>

最后：

php代码中的数据库代码上 都是我自己的数据库名，所以需要换成你的，可以对应我下图我的数据库表单来更换：

ps：

上传的文件储存在了同级的photo页面中：
但是汉字出现了乱码的效果，经大佬指点，只要把utf-8改一下就行了
改成：

ps：上传的图片效果：

感谢大佬指点 教会我图片怎么上传到php中 学会了！！