實現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;width: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);
            }
        });
    });
});

 

完整包提供  就是網上下的靜態代碼 修改的