网址这里的
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); } }); }); });
完整包提供 就是网上下的静态代码 修改的