• 上传文件 前台使用ajax+botton+隐藏file向后台传递MultipartFile 实现文件上传


    现在的上传一般是使用框架进行上传,都快把最基本的的上传忘了,在这里写一个普通的上传复习一下

    ayui.use('upload', function () {
    var $ = layui.jquery
    , upload = layui.upload;
    // //普通文档上传
    var uploadInst = upload.render({
    elem: '#uploadsubsop'
    , multiple: true
    , url: '/uploadword/uploadwordsop'
    , accept:"file"
    , before: function (obj) {
    这个是个前端框架自带的上传文件模板   这种上传已经很普遍了
    来个究极简单的上传
     
    这是前端 

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>file文件操作测试</title>
    </head>
    <body>

    <input type="file" id="file1" name="file1" style="display:none">

    <button type="button" id="gofile">上传文件</button>

    </body>

    <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">

    //提交后台
    $("#gofile").on("click", function () {
    $("#file1").click();
    });
    $("#file1").on("change", function () {
    var formData = new FormData();
    formData.append("files", $("#file1")[0].files[0]);
    $.ajax({
    type:'POST',
    url:"/test/main/uploadfile",
    data:formData,
    contentType:false,
    processData:false, 
    // dataType:"json",
    mimeType:"multipart/form-data",
    success:function(data){
    if(data=="true"){
    alert("保存成功!");
    }else{
    alert("保存失败!");
    }
    }
    });
    }); 

    </script>

    </html>

    后端
     

    /**
    * 上传
    * @return
    */
    @RequestMapping(value="/uploadfile",method = RequestMethod.POST)
    @ResponseBody
    public String uploadfile(@RequestParam("files") MultipartFile files) throws IOException{

    return setFile(files)==true?"true":"false";
    }
    public boolean setFile(MultipartFile multipartFile) throws IOException {
    boolean filetype=false;
    try {
    String packingId="9527";
    String name = "";
    if (multipartFile != null) {
    name = multipartFile.getOriginalFilename();// 直接返回文件的名字
    String subffix = name.substring(name.lastIndexOf(".") + 1, name.length());// 我这里取得文件后缀
    String name1=name.substring(0,name.lastIndexOf(".")); // 原来文件的名字 保存到其他地方
    String fileName = packingId + getDateFormat(new Date(), "YYYYMMDDHHMMSS");// 文件保存进来,我给他重新命名
    String filepath = "D:\file\"+packingId;
    File file = new File(filepath);
    if (!file.exists()) {// 目录不存在就创建
    file.mkdirs();
    }
    //这个方法就可以新增了
    multipartFile.transferTo(new File(file + "\" + fileName + "." + subffix));// 保存文件
    }
    filetype = true;
    } catch (Exception e) {
    System.out.println(e);
    filetype = false;
    return filetype;
    }
    return filetype;
    }
    /**
    * 日期格式化
    *
    * @param date
    * @param 格式类型
    * @return
    */
    public static String getDateFormat(Date date, String formatStr) {
    if (!StringUtils.isEmpty(formatStr)) {
    return new SimpleDateFormat(formatStr).format(date);
    }
    return null;
    }

    搞定啦 ~  当然这是建立在有下载环境的情况下

    <!-- 加了这个才可以上传 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />

    <!-- 实现上传需要的jar -->
    <dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
    </dependency>
    <dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>

    </dependency>

  • 相关阅读:
    css3中的位置移动
    css中伪元素选择器
    css中伪类选择器
    html5之属性选择器
    html5的文本属性
    html5的视频和音频使用
    常用的linux命令
    常见的http状态码
    springboot之安装和启动es
    linux版本的jdk安装
  • 原文地址:https://www.cnblogs.com/Mr-Y1907/p/11270991.html
Copyright © 2020-2023  润新知