springMVC文件上传

时间 2019-11-19

原文原文链接

1、文件上传javascript

一、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>

二、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>

三、获取页面，快速开始

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

四、复制FTPUtilcss

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

2、页面参考

一、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>

二、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>

三、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 Uploadervar 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('只能选择一个文件');    }}