Loading

HTML5 JQUERY使用token验证，通过api上传图片到图床 EasyImages2.0 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
<!--上传文件-->
<div id="uploadDiv">
    <form id="uploadForm" enctype="multipart/form-data">
        文件:<input id="file" type="file" name="image"/>
        <input type="text" style="display: none" name="token" value="8d1dbbf08efdfba61af9667a4d3d4efb"/>
    </form>
    <button id="upload">上传文件</button>
</div>

<!--结果运用-->
<div id="resFrom">
    <form id="resForm" enctype="multipart/form-data">


        图片地址：<input type="text" id="url" name="url" value="图片地址">
        <br>
        缩略图地址：<input type="text" id="thumb" name="thumb" value="缩略图地址">
        <br>
        删除链接：<input type="text" id="delUrl" name="del" value="缩略图地址">
    </form>

</div>

<!--图片展示-->
<div id="imgDiv">
    <img id='img1' src=""/>

</div>

<!--js代码-->
<script type="text/javascript">
    $(function () {
        $("#upload").click(function () {
            var token = '8d1dbbf08efdfba61af9667a4d3d4efb'
            var formData = new FormData($('#uploadForm')[0]);
            $.ajax({
                type: 'post',
                url: "http://192.168.1.221:8081/api/index.php", //上传文件的请求路径必须是绝对路劲
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                success: (res) => {
                    $('#img1').attr('src', res.url);
                    $('#imgs').append()
                    $('#url').attr('value', res.url);
                    $('#thumb').attr('value', res.thumb);
                    $('#delUrl').attr('value', res.del);
                },
                error: () => {
                    console.log("失败");
                }
            });
        });
    });
</script>

</body>
</html>

　　

posted @ 2022-06-22 19:03  上官飞鸿  阅读(117)  评论(0)    收藏  举报