单文件上传保存到本地服务器

后台: 用multipartFile接收文件 获取文件名 根据uuid生成新的文件名 再用transfetTo把文件存入服务器

@Controller
@RequestMapping(value = "/upload",method = RequestMethod.POST)
public class controller {

    @RequestMapping("/uploadTest")
    @ResponseBody
　　　　　　　　　　　　　　 //指定表单上的file为MultipartFile 
    public Object test1(@RequestParam("file") MultipartFile file, HttpServletRequest request, HttpServletResponse response){
        //获取上传文件名,包含后缀
        String originalFilename = file.getOriginalFilename();
        //获取后缀
        String substring = originalFilename.substring(originalFilename.lastIndexOf("."));
        //保存的文件名
        String dFileName = UUID.randomUUID()+substring;
        //保存路径
        //springboot 默认情况下只能加载 resource文件夹下静态资源文件
        String path = "D:/pic/";
        //生成保存文件
        File uploadFile = new File(path+dFileName);
        System.out.println(uploadFile);
        //将上传文件保存到路径
       String type =  request.getParameter("type");
       String name = request.getParameter("name");
       System.out.println(type);
       System.out.println(name);

        Map<String,Object> map = new HashMap<String, Object>();
        map.put("success","200");
        map.put("error","失败");
        map.put("name",name);

        try {
            file.transferTo(uploadFile);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return map;
    }

}

前端: 没有用form表单 div小模块拼凑 ajax传输

<div class="form-group">
    <label class="col-sm-2 control-label">文件上传</label>
    <div class="col-sm-10">
　　　　　　/*
accept在这里是上传各种类型的文件 没限制 后期可根据要求限制格式
*/
        <input type="file" class="file" id="search_key_file"
               accept="*"/>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label">你要选谁</label>
    <div class="col-sm-10">
        <input type="radio" name="search_key_type" value="谢谢哥" checked>
        <label>选我吧哥</label>
        <input type="radio" name="search_key_type" value="谢谢靓仔">
        <label>选我吧靓仔</label>
    </div>

</div>
<div class="form-group">
    <input id="name" type="text" name="name" value="name">
</div>
<div class="form-group">
    <div class="col-sm-10 col-sm-offset-2" style="margin-top: 10px;">
        <button class="btn btn-primary" type="button" onclick="tijiao();">
            确定
        </button>
    </div>
</div>
</body>


<script type="text/javascript">

function tijiao() {

    var file_obj = document.getElementById('search_key_file').files[0];//获取文件
/*
input[name="这里写input中name值 radio中name是相同的,在这里我写的^是代表匹配已se开头的 装b下啦 不用研究 后期根据要求更改"]:checked 
*/
    var type = $("input[name^='se']:checked").val();//获取单选
    var name =$("#name").val();//获取名字

var fd = new FormData();//分别放入formdata
fd.append('file',file_obj);
fd.append('type',type);
fd.append('name',name);

$.ajax({
    url: '/upload/uploadTest',
    type: 'post',
    data: fd,
    dataType: "JSON",
    processData: false, //不设置的话默认传字符串 文件会传不过去
    contentType: false, 
    success:function (map) {
        if (map.success==200){

            alert(map.name+"的信息上传成功");
        }
    },
    erroe:function (map) {
        alert(map.error);
    }

});
}
</script>


----------------------------------

如果您认为这篇文章还不错或者有所收获，您可以点击文章下方“推荐”按钮【精神支持】，您的“推荐”将是我最大的写作动力！
欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，凡是转载于本人的文章，不能设置打赏功能，如有特殊需求请与本人联系！

 成功: