1.查看api文档
登陆官网可以直接查看详细的api文档,通过发送ajax请求 返回给你json地址,然后就可以通过地址访问了。
2.上传的小demo
直接复制一面就可以实现上传功能。很简单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
function uploads(){
var file = $('#file')[0];
var formData=new FormData();
formData.append('smfile',file.files[0]);
$.ajax({
type:"post",
dataType:"json",
url : "https://sm.ms/api/upload",
async:false,//异步 true 同步
cache: false,//缓存 false的话会在url后面加一个时间缀,让它跑到服务器获取结果。
contentType: false,//上传的时候必须要
processData: false,
data:formData,
success: function(data){
console.log(data);
$('#res').append("<img src='"+data.data.url+"'>");
},
error: function(data){
console.log(data);
},
})
}
</script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input name="smfile" type="file" id="file"/>
</form>
<button type="button" onclick="uploads()">上传</button>
<div id="res"></div>
</body>
</html>
3.结合fileinput实现上传
fileinput是一款bootstrap的上传插件,方便使用,本篇不详细介绍插件的使用。
3.1引入插件
3.2初始化fileinput插件,如果要使用插件需要提前配置
3.3 写html 样式如下
3.4 用ajax实现上传
3.5 详细代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/css/fileinput.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/locales/zh.min.js"></script>
<script>
$(function () {
initFileInput("filePicture","https://sm.ms/api/upload");
})
/**
* 初始化fileinput控件(第一次初始化)
* @param ctrlName id
* @param uploadUrl 路径
* @returns
*/
function initFileInput(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
//uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'png', 'gif'], //接收的文件后缀
showUpload: false, //是否显示上传按钮
showCaption: false, //是否显示标题
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
});
}
function selectPic(){
var file = $('#filePicture')[0];
for(var i = 0; i < file.files.length;i++){
var formData=new FormData();
formData.append('smfile',file.files[i]);
ajaxUploadToSM(formData)
}
}
function ajaxUploadToSM(formData){
$.ajax({
type:"post",
dataType:"json",
url : "https://sm.ms/api/upload",
async:false,//异步 true 同步
cache: false,//缓存 false的话会在url后面加一个时间缀,让它跑到服务器获取结果。
contentType: false,//上传的时候必须要
processData: false,
data:formData,
success: function(data){
console.log(data);
$('#addFormPicName').append("<img src='"+data.data.url+"'>");
},
error: function(data){
console.log(data);
},
})
}
</script>
</head>
<body>
<div class="form-group">
<div id="addFormPicName">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#selectPicModal">添加图片</button>
</div>
<input type="hidden" id="addFormPic" name="img" class="form-control">
</div>
<!-- 模态框 -->
<div style="z-index: 100000" class="modal fade" id="selectPicModal" tabindex="-1" role="dialog" aria-labelledby="selectPicModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">选择图片</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form id="selectPicForm">
<input type="file" id="filePicture" name="smfile" multiple="multiple"><!-- -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="selectPic()">保存</button>
</div>
</div>
</div>
</div>
</body>
</html>
4.总结
上面的两个小demo页面html可以直接复制即用。(用的bootcss的cdn 需要联网)
建议重要图片不要存放sm图床。
希望对你们有帮助,我也顺便记录一下。