zoukankan      html  css  js  c++  java
  • Spring 上传文件

    最近碰到一个上传文件的需求,其实之前也做过但是都是search->copy 没有细究过,这次纯手工。

    先看一下需要依赖的包:

    <dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2.2</version>
    </dependency>
    <dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.0.1</version>
    </dependency>

    然后看一下bean的配置

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="utf-8"/>
    <!--代表上传文件大小的最大值 -1代表无限大-->
    <property name="maxUploadSize" value="-1"/>
    <!--如果文件大小小于maxInMemorySize 的时候 系统不会产生临时文件 直接将文件写在内存中 需要注意-->
    <property name="maxInMemorySize" value="1"/>
    </bean>

    接下来看一下 controller层  自己随意写的 轻喷

    package com.springapp.mvc;
    
    import org.apache.commons.fileupload.disk.DiskFileItem;
    import org.apache.commons.io.FileUtils;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    import org.springframework.web.multipart.commons.CommonsMultipartFile;
    
    import java.io.File;
    import java.io.IOException;
    
    /**
     * Simple to Introduction
     */
    @Controller
    public class FileController {
    
        @RequestMapping(value = "/upload", method = RequestMethod.POST)
        public @ResponseBody void uploadFile(@RequestParam(value = "file") MultipartFile multipartFile, Model model) throws IOException {
            CommonsMultipartFile cf = (CommonsMultipartFile) multipartFile;
            DiskFileItem fi = (DiskFileItem) cf.getFileItem();
            File file = fi.getStoreLocation();
            String content = FileUtils.readFileToString(file);
            model.addAttribute("content", content);
        }
    }

    上面我进行了一下文件转换,读了一下文件内容

    接下来看一下前端  原生form的

    1     <form id="fileuploadForm" action="/upload" method="POST" enctype="multipart/form-data" class="cleanform">
    2         <input id="file" type="file" name="file" />
    3         <p><button type="submit">Upload</button></p>
    4     </form>

    再来一发angular 原生的

            <a href="javascript:;" class="btn-small btn-blue in_block" ngf-select ng-model="upLoadFiles"
               ng-click="changeStatus">上传</a>

    js  app这些就不写了从 controller开始吧 需要注入 Upload

    function ConfigAuthController($scope, $rootScope, $http, Upload) {
    
    /**
         * 开始上传
         */
        function importFile() {
    
            $scope.showPop = false;
            var files = $scope.upLoadFiles;
            console.log(files);
    
            if (!files || files.length == 0) {
                $scope.message = "请选择文件";
                return false;
            }
    
            for (var i = 0; i < files.length; i++) {
                $scope.loadStatus = true;
                var file = files[i];
                if (file.type != "text/plain") {
                    $scope.message1="";
                    $scope.message = "请上传文件TXT格式";
                    showPopupDiv($('#layer_warning'));
                    return;
                }
                if (file.size > 5 * 1024 * 1024) {
                    $scope.message1="";
                    $scope.message = "上传的文件大小超过5M";
                    showPopupDiv($('#layer_warning'));
                    return;
                }
                //if($scope.workspaceEmpFilePath.checkStatus == false){
                //    $scope.message = "文件ID格式错误";
                //    showPopupDiv($('#layer_warning'));
                //    return;
                //}
    
    
                Upload.upload({
                    url: '/workspaceAuth/upload',
                    file: file,
                    fileFormDataName: 'uploadFile'
                }).progress(function (evt) {
                    var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                    console.log('进度:' + progressPercentage + '% 文件名:' + evt.config.file.name);
                }).success(function (data, status, headers, config) {
    
                    if (data.checkStatus == false) {
                        //
                        return;
                    }
                    $scope.getFile = data;
                    alert("上传成功!")
                }).error(function (data, status, headers, config) {
                    $scope.message = data.message;
                    $scope.loadStatus = false;
                });
            }
        }
    
    }

    暂时写到这 后续补充

  • 相关阅读:
    Linux防火墙开放某端口号
    MySQL的权限管理
    Linux安装Node.js
    Eclipse上传新项目到GitLab
    Linux安装Nexus
    Linux安装中文字体_宋体
    Linux用户管理
    Linux安装MySQL_5.6
    reduce基本用法,js实现分组
    js 数字格式化
  • 原文地址:https://www.cnblogs.com/huangpeng1990/p/4987227.html
Copyright © 2011-2022 走看看