一，新建文件，upload文件夹内是空，用来保存上传过的图片

1.png

二，新建数据库，新建表，数据库名（upload），表名（photo）

  这里是photo表里面的字段和类型

2.png

三，html代码引用 jquery 和 template 模版

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://cdn.staticfile.org/artTemplate.js/3.0.1/template.js"></script>

四，html内容

<form action="php/upload.php" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file">
        <br>
        <input type="submit" name="submit" value="提交">
</form>
<ul id="content">

 </ul>

模版内容，类名自己定义，写样式

<script type="text/html" id="test">
    {{each data}}
        <li class="ming">
            <span>{{$value.name}}</span>
            <br>
            <span>{{$value.size}}</span>
            <br>
            <span>{{$value.type}}</span>
            <br>
            <span class="lu">{{$value.url}}</span>
        </li> 
    {{/each}}
</script>

五，ajax请求

 $(function () {
        $.ajax({
            url: "php/api.php",
            type: "POST",
            dataType: "json",

            success: function (data, textStatus) {
                console.log(data);
                var html = template("test", data);
                $("#content").html(html);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest["responseText"]);
            }
        })
    })

六，conn.php 内容

连接本机数据库

$conn = mysqli_connect("localhost","root","");

更改连接的默认数据库

mysqli_select_db($conn,"upload");

告诉mysql服务器把后面要发送的sql语句使用的字符集当作指定的字符集来解析，并且返回的结果数据的字符集也是指定的字符集，作用就是保证客户端（sql语句）和服务器端使用的编码一致，不至于出现乱码或者数据丢失

mysqli_query($conn,"set names utf8");

conn.php

<?php
    $conn = mysqli_connect("localhost","root","");
    mysqli_select_db($conn,"upload");
    mysqli_query($conn,"set names utf8");
?>

七，api.php内容

<?php
include 'conn.php';
$responseArr = array(
    "code" => 200,
    "data" => null,
    "msg" => "数据获取成功"
    );
        $sql = "select * from photo";
        $result = mysqli_query($conn,$sql);
        if ( mysqli_num_rows($result)>0) {
            $studentlist = array();
            while ($row = mysqli_fetch_assoc($result)){
                $studentlist[] = $row;
            }
            $responseArr["data"] = $studentlist;
        }else{
            $responseArr["msg"] = "暂无记录";
            $responseArr["code"] = 207;
        }
        die(json_encode($responseArr));
        mysqli_close($conn);
 ?>

八，upload.php 内容

<?php include("conn.php")?>

<?php
    //命名
    $filenames= $_FILES['file']['name'];
    $filesize = $_FILES['file']['size'];
    $filetype = $_FILES['file']['type'];
    //判断图片类型，和大小
    if ((($_FILES["file"]["type"] == "image/jpg")|| ($_FILES["file"]["type"] == "image/jpeg")|| ($_FILES["file"]["type"] == "image/png")|| ($_FILES["file"]["type"] == "image/jpeg")) && ($_FILES["file"]["size"] < 10241000)){
    if ($_FILES["file"]["error"] > 0) {
      echo "错误: " . $_FILES["file"]["error"] . "<br/>";
     }else{
        $filenames = $_FILES['file']['name'];
        //strtolower 把所有字符转为小写
        //substr返回字符串的一部分
        //strripos查找字符串在另一字符串中最后一次出现的位置（对大小写不敏感）
        $file_ext_name = strtolower(substr($filenames, strripos($filenames,'.')));
        //重新给上传的文件命名，增加一个年月日时分秒的前缀，并且加上保存路径
        $filename = "../upload/".date("YmdHis").$_FILES["file"]["name"];
        $fileurl = "../upload/".date("YmdHis").$_FILES["file"]["name"];
        // 临时文件路径  存放路径，参数1:临时文件路径，参数2:存放的路径
        move_uploaded_file($_FILES["file"]["tmp_name"],$filename); 
        echo "文件名：" . $_FILES["file"]["name"] . "<br />";
        echo "文件类型：" . $_FILES["file"]["type"] . "<br />";
        echo "文件大小：" . ($_FILES["file"]["size"] / 1024) . "KB<br />";
        echo "暂存目录：" . $_FILES["file"]["tmp_name"] . "<br />";
    }
}else{
    echo "您上传的文件不正确";
}
    //执行sql语句
    $sql = "insert into photo(name,type,size,url) value('$filenames','$filetype','$filesize','$fileurl')";
    echo $sql."<br/>";
    $resule = mysqli_query($conn,$sql);
    if($resule){
        echo "数据添加成功";
        //间隔1s跳转到主页面
        header("Refresh:1;url=../upload.html");
    }else{
        echo "数据添加失败".mysqli_error($conn);
    }
    //  关闭数据库
    mysqli_close($conn);
?>

php文件上传文件error错误码

2.png

$FILES['file']['error']一共有7种类型
(1)：值为0 UPLOAD_ERR_OK 没有错误，文件上传成功
(2)：值为1 UPLOAD_ERR_INI_SIZE 上传的文件超过了 php.ini 中 upload_max_filesize选项限制的值。
(3)：值为2 UPLOAD_ERR_FORM_SIZE 上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值。
(4)：值为3 UPLOAD_ERR_PARTIAL 文件只有部分被上传。
(5)：值为4 UPLOAD_ERR_NO_FILE 没有文件被上传。
(6)：值为6 UPLOAD_ERR_NO_TMP_DIR 找不到临时文件夹。PHP 4.3.10 和 PHP 5.0.3 引进。
(7)：值为7 UPLOAD_ERR_CANT_WRITE 文件写入失败。PHP 5.1.0 引进。

完成