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('只能選擇一個文件');    }}