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

}

暫時寫到這 後續補充