上传图片的前后端操作_前端上传图片到后端

前端：

html:
<textarea placeholder="说点什么吧..." id="addText" name="txtInput"></textarea>
<input type="file" class="picInput" onchange="imageUpload(this)" multiple="multiple">

JavaScript:
	var selectPics = document.getElementsByClassName("selectPics")[0];
	var imgArray = [];

	//此实例中，选择图片的input，和上传图片的按钮是分开的。在触发上传即此端代码时，下面的imageUpload方法，是绑在input上的已执行完毕
    document.getElementsByClassName("right")[0].onclick = function () {
        var picData = new FormData();
        imgArray = JSON.stringify(imgArray);
        picData.append('picInput',imgArray);
        picData.append('txtInput',document.getElementById("addText").value);

        $.ajax(
            {
                url:"http://localhost/proxy/sunq/moningNight/app/addshuoshuo.php",
                type:"POST",
                processData: false,
                contentType:false,
                data:picData,
                datatype:"json",
                success:function (ret) {
                    console.log("ajax成功");
                    console.log(JSON.parse(ret));
                }
            }
        );
    }

    /*当input发生改变时，触发此方法。遍历input选中的文件，将文件转成base64字符串存入数组。并将base64转成图片预览*/
    function imageUpload(file) {
        var arrayIndex = 0;
        for(var i=0,f;f=file.files[i];i++){
            var fileRader = new FileReader();
            fileRader.readAsDataURL(f);
            fileRader.onload = function (event) {
                imgArray.push(event.target.result);
                drawPic(event.target.result,arrayIndex,imgArray);
                arrayIndex++;
            }
        }
    }
    /*预览照片。动态生成放图片的div，以及取消图片的按钮。当点击取消时，删掉对应图片以及存base64字符串的数组对应的字符串*/
    function drawPic(url,arrayIndex,imgArray) {
        /*动态生成div*/
        var createImgDiv = document.createElement("div");
        createImgDiv.className = "createImgDiv";
        createImgDiv.id = "createImgDiv" + arrayIndex;
        /*动态生成img*/
        var imageElement = document.createElement("img");
        imageElement.src = url;
        /*动态生成取消按钮*/
        var cancelButton = document.createElement("div");
        cancelButton.className = "cancelButton";
        cancelButton.id = "cancelButton" + arrayIndex;

        /*img放在div中*/
        createImgDiv.append(imageElement);
        createImgDiv.append(cancelButton);

        /*放着图片的div放在指定位置*/
        selectPics.prepend(createImgDiv);

        document.getElementById("cancelButton"+arrayIndex).onclick = function () {
            document.getElementById("createImgDiv"+arrayIndex).style.display = "none";
            console.log(arrayIndex);
//            imgArray.splice(arrayIndex,1);
            delete imgArray[arrayIndex];
            console.log(imgArray);
        };
    }

后端：

$shuoshuoTxt = $_POST["txtInput"];
$baseArray = json_decode($_POST["picInput"]);
$imgUrls = array();
for($i=0;$i<count($baseArray);$i++){
    //过滤base64字符串前缀，解码
    $url = substr(strstr($baseArray[$i],','),1);
    $pic = base64_decode($url);

    // 获取base64图片格式
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $baseArray[$i], $result)){
        // 生成的文件名
        $photo = '../pic/shuoshuo/'.randName().'.'.$result[2];

        // 生成文件
        file_put_contents($photo, $pic);
        //把php数组转成json
        array_push($imgUrls,substr($photo,3));
    }
}
//把存着多个图片地址字符串的数组转成json字符串，再往数据库里存
$imgUrlsJson = json_encode($imgUrls);

//连接数据库，存json字符串
$connent = new mysqli("localhost","root","","moningnight");
if($connent->connect_error){
    die("连接失败：".$connent->connect_error);
}else{
}
$insertdata = "insert into shuoshuo(shuoshuo,pic) values('".$shuoshuoTxt."','".$imgUrlsJson."')";
if($connent->query($insertdata)==true){
    $json = [
        "code" => "200",
        "jsondata" => '添加成功'
    ];
    echo json_encode($imgUrlsJson,JSON_UNESCAPED_UNICODE);
}else{
    echo "Error insert data: " . $connent->error;
}
mysqli_close($connent);

//随机生成移动后的文件名
function randName() {
    $str = 'abcdefghijkmnpqrstwxyz23456789';
    return substr(str_shuffle($str),0,4);
}

-----------------------------------------------------------------------------------后记------------------------------------------------------------------------------------
第一个实例，即用node.js做后端时，如果前端也使用FileReader，那么对应的后端node.js代码就不是这样了，需要你自己重新写了。

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】