图片上传

1.技术

springboot+jquery

2.前端

<div class="form-group">    <label class="col-sm-3 control-label">头像：</label><div class="col-sm-8"><input id="photo" name="photo" class="form-control" type="file"></div>
</div>

3.js

 var photo=$("#photo").val();if(photo!=null && photo!=""){// 构建数据var data = new FormData()data.append('name', $('[name=photo]').val())data.append('file', $('[name=photo]')[0].files[0]) // file 对象$.ajax({cache : false,type : "POST",url : "/upload",data :data,processData: false,//数据不被转换为字符串contentType: false,//上传文件时使用，避免 JQuery 对其操作async : false,dataType:"json",error : function(request) {},success : function(data) {if (data.code == 0) {photo = data.fileName;} }});}

4.工具类

package com.bootdo.common.utils;import java.io.File;
import java.io.FileOutputStream;
import java.util.UUID;public class FileUtil {public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {File targetFile = new File(filePath);if (!targetFile.exists()) {targetFile.mkdirs();}FileOutputStream out = new FileOutputStream(filePath + fileName);out.write(file);out.flush();out.close();}public static boolean deleteFile(String fileName) {File file = new File(fileName);// 如果文件路径所对应的文件存在，并且是一个文件，则直接删除if (file.exists() && file.isFile()) {if (file.delete()) {return true;} else {return false;}} else {return false;}}public static String renameToUUID(String fileName) {return UUID.randomUUID() + "." + fileName.substring(fileName.lastIndexOf(".") + 1);}
}

5.controller

package com.bootdo.util;import com.bootdo.common.config.BootdoConfig;
import com.bootdo.common.controller.BaseController;
import com.bootdo.common.domain.FileDO;
import com.bootdo.common.service.FileService;
import com.bootdo.common.utils.*;
import javax.servlet.http.HttpServletRequest;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@Controller
@RequestMapping("")
public class uploadController extends BaseController {private String pathName="D://springboot//tomcat//upload/";@ResponseBody@PostMapping("/upload")R upload(MultipartFile file, HttpServletRequest request) {String fileName = file.getOriginalFilename();fileName = FileUtil.renameToUUID(fileName);try {FileUtil.uploadFile(file.getBytes(), pathName, fileName);return R.ok().put("fileName","/upload/"+fileName);} catch (Exception e) {e.printStackTrace();}return R.error();}
}

6.补充说明

ps:文件之前是放在tomcat临时文件下的，但是每次服务重启就不是之前的tomcat临时文件了，所以之前上传到服务器的图片，再查找路径就不对，就会找不到图片，所以，后来改成放在本地路径，并把资源映射改到本地路径：

package com.bootdo;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/**
* 资源映射路径
*/
@Configuration
public class MyWebMvcConfigurerAdapter implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/upload/**").addResourceLocations("file:D:/springboot/tomcat/upload/");}
}

ps:添加之后想让图片显示在列表：
获取url路径

var href = location.host;
if(href.indexOf("http://")<0 && href.indexOf("https://")<0){href="http://"+href;
}

bootstrapTable放formatter

{field : 'photo', title : '头像' ,formatter : function(value, row, index) {if(value!=null && value!= ""){return "<img style='width: 70px;height: 30px;' src='"+href+value+"' alt=''>"}}
},

7.遗留问题

还有一个大问题，点击修改的时候如何给文件赋值，等我再找找吧

bootdo图片上传相关推荐

html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
yii2框架原生的结合框架使用的图片上传
首先我们要从model层开始写起,主要是为了创建验证规则,还有图片上传的路径以及图片的命名规则(UploadForm.php) 接下来我们要在控制器层写好业务逻辑,就是什么情况下直接在调用model层 ...
java flex 图片上传_flex上传图片到java服务器
今天弄flex上传图片到java,现在弄成功,中间也经常一点小波折,现记录一下.重点在java侧的实现. flex侧:文件上载到在url参数中传递的URL.该URL必须是配置为接受上载的服务器脚本.F ...
js表单提交，支持图片上传，包含后端php代码
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. <html><head><meta http-equiv="Conte ...
ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)
CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...
图片上传(加水印、缩略图、远程保存）的简单例子
图片上传(加水印.缩略图.远程保存)的简单例子(应用于51aspx.com) 该源码下载地址:http://51aspx.com/CV/ImageUpload 今天看到xiongeee发的文章使用使用 ...
使用summernote实现复制图片即可实现图片上传
个人资源与分享网站:http://xiaocaoshare.com/ 1.页面结构 <script src="../statics/js/plugins/summernote/summ ...
js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html><head>< ...
SpringBoot 2.0 多图片上传加回显
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 本文来源:http://r6f.cn/crEY 这两天公司 ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

bootdo图片上传

springboot图片上传