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

最新推荐文章于 2024-04-03 05:29:58 发布

无所不言。

最新推荐文章于 2024-04-03 05:29:58 发布

阅读量2k

点赞数

分类专栏： fileinput sm html 文章标签：上传 fileinput sm 图床

本文链接：https://blog.csdn.net/qq_40312160/article/details/88096107

版权

fileinput 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

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图床。

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

无所不言。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
上传sm图床 bootstrap fileinput插件结合sm图床实现上传功能

sm图床官网sm图床api文档1.查看api文档登陆官网可以直接查看详细的api文档，通过发送ajax请求返回给你json地址，然后就可以通过地址访问了。2.上传的小demo直接复制一面就可以实现上传功能。很简单。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8...
复制链接

扫一扫