springMVC文件上传

2018-07-20 05:49:45来源：博客园阅读 ()

一、文件上传

1、spring-mvc.xml中文件上传的配置

<!-- 定义文件上传解析器 -->
<bean id="multipartResolver"
     class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <!-- 设定默认编码 -->
   <property name="defaultEncoding" value="UTF-8"></property>
   <!-- 设定文件上传的最大值5MB，5*1024*1024 -->
   <property name="maxUploadSize" value="5242880"></property>
</bean>

2、jodatime

<joda-time.version>2.9.9</joda-time.version>

<!-- 时间操作组件 -->
<dependency>
    <groupId>joda-time</groupId>
    <artifactId>joda-time</artifactId>
    <version>${joda-time.version}</version>
</dependency>

3、获取页面，快速开始

（1）控制文件上传的数量

fileNumLimit: 1,

.on( 'error', function( handler ) {

    if(handler == 'Q_EXCEED_NUM_LIMIT'){
        layer.alert('只能选择一个文件');
    }

});

（2）是否一次能选择多张图片

pick: {
    id:'#' + pickId,
    multiple: false
},

（3）成功后添加样式并获取响应

.on( 'uploadSuccess', function( file, response ) {
    $( '#'+file.id ).addClass('upload-state-done');
    $('#uploadImage1').val(response.url);
})

4、复制FTPUtil

5、controller

/**
 * 处理前台实名时候上传的图片
 *
 * @param file
 * @return
 */

@RequestMapping("real_auth_upload")
@ResponseBody
public R realAuthUpload(MultipartFile file) throws IOException {

    String originalFilename = file.getOriginalFilename();
    String type = originalFilename.substring(originalFilename.indexOf("."));
    String newFileName = UUID.randomUUID().toString() + type;

    String imagePath = new DateTime().toString("/yyyy/MM/dd");

    InputStream inputStream = file.getInputStream();
    String host = "此处自己写地址";
    FtpUtil.uploadFile(
            host,
            21, "ftpuser",
            "ftpuser",
            "/home/ftpuser/images",
            imagePath,
            newFileName,
            inputStream);

    String url = host + "/images" + imagePath + "/" + newFileName;
    return R.ok("文件上传成功").put("url", url);
}

二、页面参考

1、html

<div class="form-group">
    <label class="col-sm-4  control-label" for="address">身份证照片</label>
    <div class="col-sm-8">
        <p class="text-help text-primary">请点击“选择图片”,选择证件的正反两面照片。</p>
        <!--dom结构部分-->
        <div id="uploader-demo1">
            <!--用来存放item-->
            <div id="fileList1" class="uploader-list"></div>
            <div id="filePicker1">上传身份证正面照片</div>
        </div>
        <!--dom结构部分-->
        <div id="uploader-demo2">
            <!--用来存放item-->
            <div id="fileList2" class="uploader-list"></div>
            <div id="filePicker2">上传身份证反面照片</div>
        </div>


        <input type="hidden" name="image1" id="uploadImage1" />
        <input type="hidden" name="image2" id="uploadImage2" />
    </div>
</div>

2、css

<style>
    .file-item.thumbnail, .file-item.thumbnail image{
        width: 300px;
        height: 200px;
    }

    .upload-state-done{
        border: #0fa24e 3px dashed;
        background-color: rgba(16, 253, 107, 0.16);
    }

    #uploader-demo1, #uploader-demo2{
        margin-bottom: 10px;
    }
</style>

3、js

<link rel="stylesheet" type="text/css" href="script/webuploader-0.1.5/webuploader.css">
<script type="text/javascript" src="script/webuploader-0.1.5/webuploader.min.js"></script>

// 初始化Web Uploader
var uploader1 = WebUploader.create(getOption('filePicker1'))
    .on( 'fileQueued', function( file ) {
        fileQueued(file, 'fileList1',uploader1 );
    })
    .on( 'uploadSuccess', function( file, response ) {
        uploadSuccess(file, response, 'uploadImage1');
    })
    .on( 'error', function( handler ) {
        checkError(handler);
    });

var uploader2 = WebUploader.create(getOption('filePicker1'))
    .on( 'fileQueued', function( file ) {
        fileQueued(file, 'fileList2',uploader2 );
    })
    .on( 'uploadSuccess', function( file, response ) {
        uploadSuccess(file, response, 'uploadImage2');
    })
    .on( 'error', function( handler ) {
        checkError(handler);
    });

//基本配置
function getOption(pickId){
    return {
        auto: true,// 选完文件后，是否自动上传。
        swf: 'script/webuploader-0.1.5/Uploader.swf',// swf文件路径
        server: 'real_auth_upload',// 文件接收服务端。
        fileNumLimit: 1,
        pick: {
            id:'#' + pickId,
            multiple: false
        },// 选择文件的按钮。可选。内部根据当前运行是创建，可能是input元素，也可能是flash
        accept: {// 只允许选择图片文件。
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    }
}

//显示缩略图
function fileQueued( file , listId, uploader) {
    var $li = $(
        '<div id="' + file.id + '" class="file-item thumbnail">' +
        '<img>' +
        '<div class="info">' + file.name + '</div>' +
        '</div>'
    );
    var $img = $li.find('img');
    // $list为容器jQuery实例
    var $list = $('#' + listId);
    $list.append( $li );
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }
        $img.attr( 'src', src );//给图片的地址赋值
    }, 300, 200 );
}

//成功后的页面处理
function uploadSuccess( file, response, imageInputId ) {
    $( '#'+file.id ).addClass('upload-state-done');
    $('#' + imageInputId).val(response.url);
}

//提交前检查
function checkError(handler){
    if(handler == 'Q_EXCEED_NUM_LIMIT'){
        layer.alert('只能选择一个文件');
    }
}