上传sm图床 bootstrap fileinput插件结合sm图床实现上传功能

sm图床官网

sm图床api文档

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">&times;</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图床。

希望对你们有帮助，我也顺便记录一下。

上传sm图床 bootstrap fileinput插件结合sm图床实现上传功能相关推荐

php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...
本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 效果图如下所示: 具体代码如下: cl ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
Bootstrap fileinput.js，最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
fileinput.js php,bootstrap fileinput 插件使用项目总结
基础的定义及使用方法网上有很多不再概述,这儿主要写本人所使用项目时碰到的一些问题及解决方案注:本人使用此插件主要用来上传图片之用,插件其他上传文件没有涉及一.上传最小数量问题通过查阅其他资料可知 ...
bootstrap+fileinput插件实现可预览上传照片功能
图片.png 实际项目中运用: 图片.png 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html><head><me ...
java 批量上传pdf文件_使用fileinput插件批量上传文件
使用fileinput插件批量上传文件前言最近在做项目的时候涉及文件批量上传,使用bootstrap结合fileinput插件批量上传文件!以下是我在使用fileinput上传文件的过程.项目是基 ...
h5页面的雷达图五边形_konva canvas插件写雷达图示例
最近,做了一个HTML5的项目,里面涉及到了雷达图效果,这里,我将react实战项目中,用到的雷达图单拎出来写一篇博客,供大家学习. 以下内容涉及的代码在我的gitlab仓库中: Konva canv ...
Bootstrap FileInput(文件上传)中文API整理
下载地址.API和DOM地址(英语好的小伙伴可以看看) 下载地址:https://github.com/kartik-v/bootstrap-fileinput API文档 :http://plugi ...
kingedit 上传php_JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...