实现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);
            }
        });
    });
});

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

原文地址:https://www.cnblogs.com/baker95935/p/12860973.html