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:width:按钮的宽度

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

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

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