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;
            });
        }
    }

}

暂时写到这 后续补充

 

posted @ 2015-11-23 00:16  NPH  阅读(401)  评论(0编辑  收藏  举报