Bootstaop文件上传回显图片

文件上传

HTML

			<!-- save 添加 编辑  弹出模态框-->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel"></h4>
								<!-- Modal title -->
							</div>
							<div class="modal-body">
								<from action="http://192.168.5.2:8378/upload/uploadimg" method="post" enctype="multipart/form-data">
									<div>
										新闻标题:<input type="text" id="title" class="form-control border-input" placeholder="请输入新闻标题" style="margin-top: 3%;">
									</div>
									<div>
										新闻简介:<input type="text" id="text" class="form-control border-input" placeholder="请输入新闻简介" style="margin-top: 3%;">
									</div>
									<div>
										新闻内容:<input type="text" id="content" class="form-control border-input" placeholder="请输入新闻内容" style="margin-top: 3%;">
									</div>

									<div class="upload-wrap">
										<input type="file" name="fileName" id="filename"  ref="clearFile" accept="image/png,image/jpg" onchange="checkImage()" />
									</div>
									<div id="upload" style="position: absolute; top: 77%; left: 35%;">
										<input type="button" value="上传" onclick="upload()" />
									</div>
									<div id="empty" style="position: absolute; top: 77%; left: 45%;">
										<input type="button" value="清空" onclick="empty()" />
									</div>
								</from>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" onclick="submit()">提交</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							</div>
						</div>
					</div>
				</div>

javascript 上传

//检查图片
		function checkImage() {
			var fileName = $("#filename").val();
			fileName = fileName.replace("C:\\fakepath\\", "");
			var flag = true;
			if (fileName == "") {
				flag = false;
				swal("提示", "请选择图片","warning");
			} else {
				var size = $("#filename")[0].files[0].size;
				if (size / 5000 > 500) {
					flag = false;	
					swal("警告", "图片大小不能超过500KB","error");
				}
			}
			if (flag) {
				onLoadImage();
			} else { //清除input type=file的显示内容
				$("#filename").val("");
			}
			return flag;
		}

    //提交 这里就不写添加的编辑的判断了  
	function submit() {
			var journalismtitle = $("#title").val();
			var journalismtext = $("#text").val();
			var journalismcontent = $("#content").val();

			if (journalismtitle == null || journalismtitle == '') {
				swal("新闻标题不能为空","请您输入...", "warning");
			}
			if (journalismtext == null || journalismtext == '') {
				swal("新闻简介不能为空","请您输入...", "warning");
			}
			if (journalismcontent == null || journalismcontent == '') {
				swal("新闻内容不能为空","请您输入...", "warning");
			}
		
			var data = {
				journalismtitle: journalismtitle,
				journalismtext:journalismtext,
				journalismcontent:journalismcontent
			}
		
			$.ajax({
				type:"POST",
		    	url: "http://本机ip.2:后台端口/upload/insert",
				data:data,
				success: function(msg) {
						if (msg != "新增成功") {
					     	swal("上传失败","请查看上传内容是否正确", "error");
						} else {
						    swal("上传成功", "返回列表查询","success");
							$('#dataShow').bootstrapTable('refresh');
						   	$('#myModal').modal('hide');
						}
				}
			})
		}

图片回显

HTML

			<div class="content">
					<div class="container-fluid" style="background: white;">
						<div class="row">
							<div class="col-md-12">
								<table class="table" id="dataShow"></table>
							</div>
						</div>
					</div>
			</div>

javascript

作者在这里使用的是bootstrop-table

    //初始化
	$(function() {
			journalismDataShow();
		})

    	function journalismDataShow() {
			//开始装载数据
			$("#dataShow").bootstrapTable({
				url: "http://本机ip:后台端口/Journalism/getList",
				sortName: "id", //排序列
				striped: false, //條紋行 
				pagination: true, //启动分页
				pageSize: 10, //每页显示的记录数
				pageNumber: 1, //当前第几页
				pageList: [5, 10, 15, 20, 25, 30], //记录数可选列表
				showRefresh: false, //显示刷新按钮，
				sidePagination: "client", //表示服务端请求
				escape: true, //过滤危险字符    
				dataType: "json",
				sortOrder: "desc", //排序
				columns: [{
						title: '编号',
						field: 'id',
						align: 'center',
						valign: 'middle',
						visible: false
					},
					{
						title: '新闻标题',
						field: 'journalismtitle',
						align: 'center',
						valign: 'middle'
					},
					{
						title: '新闻简介',
						field: 'journalismtext',
						align: 'center',
						valign: 'middle',
					},
					{
						title: '新闻内容',
						field: 'journalismcontent',
						align: 'center',
						valign: 'middle'
					},
					{
						title: '新闻封面',
						field: 'journalismimg',
						align: 'center',
						// valign: 'middle'
						formatter: function(value,row,index){
							  return '<img  src="http://本机ip:后台端口/'+value+'" class="img-rounded" >';
						 }
					},
					{
						title: '发布时间',
						field: 'journalismdate',
						align: 'center',
						valign: 'middle'
					},
					{
						title: '操作',
						field: 'id',
						align: 'center',
						formatter: function(value,row,index) {
							return [
								'<a href="#" data-toggle="modal" data-target="#myModal"  οnclick="save(\'' + row.id + '\')">编辑</a> ',
								'<a href="#" id="delete"  οnclick="deletes(\'' + row.id + '\')">删除</a> '
							].join('');
						}
					}
				],
				onLoadSuccess: function(ee) {
					//查询数据成功
					// console.info(ee);
				}
			});
		}

前端使用插件 swal 提示框插件 、Bootstrop-table

    <!-- Bootstrop-table -->
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
	<!-- Latest compiled and minified Locales  -->
	<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>

百度网盘: sweetalert 提取码:42ax