• 实现SM图床上传


    网址这里的

    https://doc.sm.ms/#api-Image-Upload

    图片上传  这些免费的

    1 HTML部分

            <form enctype="multipart/form-data" method="post" Authorization="14ac5499cfdd2bb2859e4476d2e5b1d2bad079bf" action="https://sm.ms/api/v2/upload" id = "upform">
            <div id = "interface"><img src="img/zb.png" align=left width=200 height=200></img><img src="img/zb.png" align=right width=200 height=200></img>
    <!-- 提示按钮 -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">使用须知</button>
    <br><code>Welcome Use [ImgUpload System!]</code><img src="https://tool.lu/netcard/" align=center>
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <h5>禁止上传违规图片、带有侵权等</h5>
          <h5>图片格式仅支持:png | gif | jpeg | jpg</h5>
          <h5>权归所有 -> 7W-Studio工作室 | Ver1.1正式版</h5>
        </div>
      </div>
    </div>
          </div>
            <input type="file" name="smfile" id = "smfile" class = "up-file" style="height:34px;600px;margin-left:-8px;border:1px solid #ccc">
            <input type="submit" id = 'btn' value = "开始上传" class = "btn">
            </form>
            </center>
        </div>
        <div id = "show">
            <center>
            <form>

    比普通的代码 要注意的在红色标注的部分

    2 JS处理部分  传回的json数据 需要转换下

    $(document).ready(function(){
     
        $("#btn").click(function(){
            $("#upform").ajaxForm(function(data,status){
                var jsarr=JSON.parse(data);
                //上传成功       
                if(jsarr.code == 'success') {
                     
                    //图片地址
                    var url = jsarr.data.url;
                    //图片宽度
                    img_width = jsarr.data.width;
                    //图片高度
                    img_height = jsarr.data.height;
                    if(img_width >= 600){
                        var b = img_width / 580;        //计算缩小倍数
                        img_width = img_width / b;
                        img_height = img_height / b;
                    }
                    $("#show").show();
                    $("#loading_up").hide();
                    $("#success_up").show();
                    $("#success_up").hide(3000);
                    document.getElementById("linkurl").value = url;
                    document.getElementById("htmlurl").value = "<img src = '" + url + "' />";
                    document.getElementById("mdurl").value = "![](" + url + ")";
                    //添加图片链接
                    $("#show_img").attr('src',url);
                    //添加图片地址
                    $("#img-url").attr('href',url);
                    //改变图片宽、高
                    $("#show_img").css("width",img_width);
                    $("#show_img").css("height",img_height);
                    //显示图片
                    $("#img-box").show();
                }
                //上传失败
                else {
                    //错误原因
                    var msg = jsarr.msg;
                    $("#uperror").html(msg);
                    $("#uperror").show();
                    $("#uperror").fadeOut(3000);
                }
            });
        });
    });

    完整包提供  就是网上下的静态代码 修改的

  • 相关阅读:
    7种启动Spring Boot项目的方式,一次性打包说给你听
    史上最详细的docker学习手册,请收藏!
    万字长文,解密秒杀架构!(建议收藏)
    IntelliJ IDEA快捷键大全 + 动图演示,建议收藏!
    Jackson 解析 JSON 详细教程
    史上最全的Excel导入导出之easyexcel
    五十五张图告诉你微服务的灵魂摆渡者Nacos究竟有多强
    IntelliJ IDEA 快捷键说明大全(中英对照、带图示详解)
    Linux vim常用操作
    密码破解.md
  • 原文地址:https://www.cnblogs.com/baker95935/p/12860973.html
Copyright © 2020-2023  润新知