js上传图片到后端并保存

Dearest one

已于 2022-12-21 11:44:37 修改

阅读量1k

点赞数 1

文章标签： javascript php 开发语言

于 2022-12-21 11:42:33 首次发布

本文链接：https://blog.csdn.net/wb_javascript/article/details/128395046

版权

前端页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../../../static/jqku/jquery-4.js"></script>
<!--该方案可以和后端进行交互,后端文件在http://localhost:8090/windows-A/demo1.php-->
<form action="http://localhost:8090/windows-A/fileLoad.php" method="POST" enctype="multipart/form-data" target="stop">
    <input type="file" name="file" id="file">
    <button id="btn" type="submit">上传</button>
</form>
<!--外部窗口但可以阻止表单的跳转行为-->
<iframe name="stop"  frameborder="0"></iframe>

<!--预览图片的demo元素-->
<img src="" alt="" id="pic">

<script>
    /*点击按钮后上传*/
    $("#btn").click(function (){
        /*获取类型为file的input对象*/
        let file = $("input[name = file]").prop("files")[0]
        console.log(file)
        /*延时预览*/
        setTimeout(function (){
            $("#pic").attr("src",`http://localhost:8090/windows-A/images/${file.name}`)
        },300)
        return

    })


</script>
</body>
</html>

后端我用的是php来编写的:

<?php
/*内容类型为文本和html,字符集为utf-8*/
header("Content-type:text/html;charset=utf-8");
/*访问控制请求为全部(跨域请求全部允许)*/
header("Access-control-Allow-Origin:*");

$file = $_FILES["file"]["tmp_name"]; //接收上传的图片路径
$filename = $_FILES["file"]["name"]; //用于保存接收图片的文件名
$path = "images/";  //设置上传图片存入的文件夹和目录


/*move_uploaded_file参数为(上传图片路径,图片上传后的完整路径)*/
$res = move_uploaded_file($file,$path.$filename);

if($res){
    echo "文件上传成功" . $path.$filename;
}else{
    echo "文件上传失败";
}

挺简单的可以自己理解一下,上面基本每行都有标注;

主要功能就和头像上传差不多