ajax請求+php上傳圖片

一拯勉，新建文件，upload文件夾內(nèi)是空憔购，用來保存上傳過的圖片

1.png

二宫峦，新建數(shù)據(jù)庫，新建表倦始，數(shù)據(jù)庫名（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內(nèi)容

<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>

模版內(nèi)容诵次，類名自己定義，寫樣式

<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 內(nèi)容

連接本機(jī)數(shù)據(jù)庫

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

更改連接的默認(rèn)數(shù)據(jù)庫

mysqli_select_db($conn,"upload");

告訴mysql服務(wù)器把后面要發(fā)送的sql語句使用的字符集當(dāng)作指定的字符集來解析，并且返回的結(jié)果數(shù)據(jù)的字符集也是指定的字符集肮雨，作用就是保證客戶端（sql語句）和服務(wù)器端使用的編碼一致遵堵，不至于出現(xiàn)亂碼或者數(shù)據(jù)丟失

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內(nèi)容

<?php
include 'conn.php';
$responseArr = array(
    "code" => 200,
    "data" => null,
    "msg" => "數(shù)據(jù)獲取成功"
    );
        $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 內(nèi)容

<?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 把所有字符轉(zhuǎn)為小寫
        //substr返回字符串的一部分
        //strripos查找字符串在另一字符串中最后一次出現(xiàn)的位置（對大小寫不敏感）
        $file_ext_name = strtolower(substr($filenames, strripos($filenames,'.')));
        //重新給上傳的文件命名锡足，增加一個年月日時分秒的前綴，并且加上保存路徑
        $filename = "../upload/".date("YmdHis").$_FILES["file"]["name"];
        $fileurl = "../upload/".date("YmdHis").$_FILES["file"]["name"];
        // 臨時文件路徑  存放路徑壳坪，參數(shù)1:臨時文件路徑舶得，參數(shù)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 "您上傳的文件不正確";
}
    //執(zhí)行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 "數(shù)據(jù)添加成功";
        //間隔1s跳轉(zhuǎn)到主頁面
        header("Refresh:1;url=../upload.html");
    }else{
        echo "數(shù)據(jù)添加失敗".mysqli_error($conn);
    }
    //  關(guān)閉數(shù)據(jù)庫
    mysqli_close($conn);
?>

php文件上傳文件error錯誤碼