P2P文件上传

采用uploadify上传  官网:http://www.uploadify.com/  (有H5版本和flash版本,H5收费,所以暂时用flash)

 uploadify的重要配置属性(http://www.uploadify.com/documentation/):

1.auto:是否选择之后立刻上传

2.buttonText:按钮的文字

3.fileObjName:服务器端获取上传文件name的属性

4.fileTypeDesc:文件类型显示提示描述

5.fileTypeExits:控制文件类型

6.formData:在上传过程中,额外的参数和值

7.height:按钮高度

8.multi:是否允许多选(默认为true)

9.overrideEvents:要覆盖的事件

 10.swf:指向uploadify的flash文件

11:uploader:后台处理上传文件的地址

12:按钮的宽度

 ==================================

<script type="text/javascript">
        $(function(){

            //把上传身份证正面的a标签变成一个uploadify的组件
            $("#uploadBtn1").uploadify({
                buttonText:"身份证正面",
                fileObjName:"file",
                fileTypeDesc:"身份证正面图片",
                fileTypeExts:"*.gif; *.jpg; *.png",
                multi:false,
                swf:"/js/plugins/uploadify/uploadify.swf",
                uploader:"/realAuthUpload.do",
                overrideEvents:["onUploadSuccess","onSelect"],
                onUploadSuccess:function(file,data){
                    $("#uploadImg1").attr("src",data);
                    $("#uploadImage1").val(data);
                }
            });
            
            $("#uploadBtn2").uploadify({
                buttonText:"身份证反面",
                fileObjName:"file",
                fileTypeDesc:"身份证反面图片",
                fileTypeExts:"*.gif; *.jpg; *.png",
                multi:false,
                swf:"/js/plugins/uploadify/uploadify.swf",
                uploader:"/realAuthUpload.do",
                overrideEvents:["onUploadSuccess","onSelect"],
                onUploadSuccess:function(file,data){
                    $("#uploadImg2").attr("src",data);
                    $("#uploadImage2").val(data);
                }
            });
});
</script>
                    <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>
                                        <a href="javascript:;" id="viewExample">查看样板</a>
                                        <div class="idCardItem">
                                            <div>
                                                <a href="javascript:;" id="uploadBtn1" >上传正面</a>
                                            </div>
                                            <img alt="" src="" class="uploadImg" id="uploadImg1" />
                                            <input type="hidden" name="image1" id="uploadImage1" />
                                        </div>
                                        <div class="idCardItem">
                                            <div>
                                                <a href="javascript:;" id="uploadBtn2" >上传反面</a>
                                            </div>
                                            <img alt="" src="" class="uploadImg" id="uploadImg2"/>
                                            <input type="hidden" name="image2" id="uploadImage2" />
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>

=================================================================

前台controller

1.需要导入fileupload的包

            <!--fileupload -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>           

2.在springMvc中加入multipartResolver

 <!--文件上传解析器-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="100000000"></property>
    </bean>
package com.xmg.p2p.base.controller;

import javax.servlet.ServletContext;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import com.xmg.p2p.base.domain.Userinfo;
import com.xmg.p2p.base.service.IRealAuthService;
import com.xmg.p2p.base.service.IUserinfoService;
import com.xmg.p2p.base.util.RequireLogin;
import com.xmg.p2p.base.util.UploadUtil;

/**
 * 实名认证控制
 * @author Administrator
 *
 */
@Controller
public class RealAuthController {
    
    @Autowired
    private ServletContext servletContext;

    /**
    * 文件上传
    */
  @RequestMapping("realAuthUpload")
  @ResponseBody
  public String realAuthUpload(MultipartFile file){
    //先得到basepath文件的绝对路径
    String basePath = servletContext.getRealPath("/upload");//会上传到webapp下的upload文件夹
    String filename = UploadUtil.upload(file, basePath);
    //System.out.println("/upload/"+filename);
    return "/upload/"+filename;

    }


}

工具类

package com.xmg.p2p.base.util;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.MultipartFile;

/**
 * 上传工具
 * 
 * @author Administrator
 * 
 */
public class UploadUtil {

    /**
     * 处理文件上传
     * 
     * @param file
     * @param basePath
     *            存放文件的目录的绝对路径 servletContext.getRealPath("/upload")
     * @return
     */
    public static String upload(MultipartFile file, String basePath) {
        String orgFileName = file.getOriginalFilename();
        String fileName = UUID.randomUUID().toString() + "."
                + FilenameUtils.getExtension(orgFileName);
        try {
            File targetFile = new File(basePath, fileName);
            FileUtils.writeByteArrayToFile(targetFile, file.getBytes());
            
            
            
        } catch (IOException e) {
            e.printStackTrace();
        }
        return fileName;
    }
}

============================================================

原文地址:https://www.cnblogs.com/jokerq/p/8616351.html