基于SSM的多图片Ajax上传添加以及图片缩放

Spring配置

 <bean id="multipartResolver"
        class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding">
        <value>UTF-8</value>
    </property>
    <property name="maxUploadSize">
        <value>10485760</value><!-- 上传文件大小限制为10M，10*1024*1024 -->
    </property>
    <property name="maxInMemorySize">
        <value>4096</value>
    </property>
    </bean>

  Maven需要的包

            <dependency>
              <groupId>commons-io</groupId>
              <artifactId>commons-io</artifactId>
              <version>2.4</version>
            </dependency>
            
            <dependency>
              <groupId>commons-fileupload</groupId>
             <artifactId>commons-fileupload</artifactId>
             <version>1.3.1</version>
           </dependency>
           
          <dependency>
             <groupId>org.apache.commons</groupId>
             <artifactId>commons-lang3</artifactId>
             <version>3.3.2</version>
          </dependency>

js页面

<form id="insertfunds" enctype="multipart/form-data">  
	<table align="center">
		<tr>
			<td>
				<label for="exampleInputName2">项目名称</label>
			</td>
			<td>
    			<input name="fundsname" type="text" class="form-control" id="exampleInputName2" placeholder="项目名称">
			</td>
		</tr>
		<tr>
			<td>
				<label for="exampleInputName2">项目简介</label>
			</td>
			<td>
    			<textarea name="fundsdesc" id="fundsdesc" class="form-control" placeholder="项目简介" rows="3"></textarea>
			</td>
		</tr>
		<tr>
			<td>
				<label for="exampleInputName2">需求金额</label>
			</td>
			<td>
    			<input type="text" name="fundsprice" class="form-control" id="fundsprice" placeholder="需求金额">
			</td>
		</tr>
		<tr>
			<td>
				<label for="exampleInputName2">联系人姓名</label>
			</td>
			<td>
    			<input type="text" name="fundsuser" class="form-control" id="fundsuser" placeholder="联系人">
			</td>
		</tr>
		<tr>
			<td>
				<label for="exampleInputName2">联系人手机号</label>
			</td>
			<td>
    			<input type="text" name="fundsphone" class="form-control" id="fundsphone" placeholder="联系人">
			</td>
		</tr>
		<tr>
			<td>
				<div style="float:left"><input class="img-btn" type="file" id="files" name="files"></div>
			</td>
			<td>
				<div style="float:left" class="img-container"></div>
			</td>
		</tr>
		<tr>
			<td>
				<div style="float:left"><input class="img-btn" type="file" id="files" name="files"></div>
			</td>
			<td>
				<div style="float:left" class="img-container"></div>
			</td>
		</tr>
	</table>
<div class="btn_boxB floatR mag_l20"><input name="" type="button" value="取消" οnmοusemοve="this.className='input_move'" οnmοuseοut="this.className='input_out'"></div>
<div class="btn_box floatR"><input id="inserfunds" name="" type="button" value="提交" οnmοusemοve="this.className='input_move'" οnmοuseοut="this.className='input_out'"></div>
</form>

JS配置Ajax提交及图片显示

<script>
        /**
         * Created by Administrator on 2016/4/28.
         */
        function previewImg(fileInput,imgDiv){
            if(window.FileReader){//支持FileReader的时候
                var reader=new FileReader();
                reader.readAsDataURL(fileInput.files[0]);
                reader.οnlοad=function(evt){
                    imgDiv.innerHTML="\<img src="+evt.target.result+"\>";
                }
            }else{//兼容ie9-
                imgDiv.innerHTML='<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + fileInput.value + '\)\';"></div>';
            }
        }
        function selectImg(fileInputs,imgDivs){
            var checkImg=new RegExp("(.jpg$)|(.png$)|(.bmp$)|(.jpeg$)","i");
            var i=0;
            for(;i<fileInputs.length&&i<imgDivs.length;i++){
                (function(i){//立即执行函数；保存i
                    fileInputs[i].οnchange=function(){
                        if(checkImg.test(fileInputs[i].value)){
                            previewImg(this,imgDivs[i]);
                        }else{
                            alert("只支持上传.jpg .png .bmp .jpeg;你的选择有误");
                        }
                    };
                })(i);
            }

        }
        /* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */
        /MSIE\s*(\d+)/i.test(navigator.userAgent);
        var isIE=parseInt(RegExp.$1?RegExp.$1:0);
        if(isIE>0&&isIE<9){
            document.getElementsByClassName=function(cls){
                var els=this.getElementsByTagName('*');
                var ell=els.length;
                var elements=[];
                for(var n=0;n<ell;n++){
                    var oCls=els[n].className||'';
                    if(oCls.indexOf(cls)<0)        continue;
                    oCls=oCls.split(/\s+/);
                    var oCll=oCls.length;
                    for(var j=0;j<oCll;j++){
                        if(cls==oCls[j]){
                            elements.push(els[n]);
                            break;
                        }
                    }
                }
                return elements;
            }
        }
        var fileInputs=document.getElementsByClassName("img-btn");//文件选择按钮
        var imgDivs=document.getElementsByClassName("img-container");//图片容器
        selectImg(fileInputs,imgDivs);
        
$(document).ready(function(){
	$("#inserfunds").click(function(){
		var formData = new FormData($('#insertfunds')[0]);
		$.ajax({
			url:"Funds/inserfunds",
			data:formData,
			type: "POST",                   //类型，POST或者GET
			dataType: 'json',
			cache: false,
	        processData: false,  
	        contentType : false,
	        async:false,
			success: function (result) {      //成功，回调函数
				if(result==null){
				 	alert("用户名或密码错误！");//请忽略这。。
				}else{
					alert("添加成功");
				}
			}
		})
	});
});

</script>

Controller页面

@RequestMapping("/inserfunds")
	@ResponseBody
	public HashMap<String,Object> inserfunds(@RequestParam("files")MultipartFile[] files,Funds funds,
            HttpServletRequest request) {
		funds.setAdminid(Integer.valueOf(String.valueOf(request.getSession().getAttribute("adminid"))));
		List<String> list = new ArrayList<String>();
		//遍历获得的MultiparFile数组
        if (files != null && files.length > 0) {
            for (int i = 0; i < files.length; i++) {
                MultipartFile file = files[i];
                // 保存文件
                list = saveFile(request, file, list);
            }
        }
        //insert准备工作
        for (int i = 0; i < list.size(); i++) {
            if(i==0) {
            	funds.setFundsimgs("/kenya/upload/"+list.get(i));
            }
            if(i==1) {
            	funds.setFundsimg1("/kenya/upload/"+list.get(i));
            }
            if(i==2) {
            	funds.setFundsimg2("/kenya/upload/"+list.get(i));
            }
            if(i==3) {
            	funds.setFundsimg3("/kenya/upload/"+list.get(i));
            }
            if(i==4) {
            	funds.setFundsimg4("/kenya/upload/"+list.get(i));
            }
        }
        //返回map
        HashMap<String,Object> map = new HashMap<String,Object>();
        //判断是否有空值
        if(fundsservice.IsNull(funds)=="非法访问") {
        	map.put("code", "040");
        	map.put("result","非法访问");
        }else {
        	//数据库添加
        	fundsservice.insertfunds(funds);
        	//添加外键
        	Admin user = adminservice.selectbyid(funds.getAdminid());
        	//外键中密码为空
        	user.setAdminpassword("");
        	funds.setAdmin(user);
        	map.put("code","000");
        	//返回插入的实体类
        	map.put("result",funds);
        }
        return map;//跳转的页面
    }

    private List<String> saveFile(HttpServletRequest request,
            MultipartFile file, List<String> list) {
        // 判断文件是否为空
        if (!file.isEmpty()) {
        	Random rand = new Random();//生成随机数    
            int random = rand.nextInt();//保存随机数
            //生成保存地址
            String filePath = request.getSession().getServletContext()
                    .getRealPath("/")
                    + "upload/" + String.valueOf(random)+file.getOriginalFilename();
            list.add(random+file.getOriginalFilename());
            File saveDir = new File(filePath);
            if (!saveDir.getParentFile().exists())
                saveDir.getParentFile().mkdirs();
    		try {
    			//转换为图片格式
    			BufferedImage bi = null;
    			bi = ImageIO.read(file.getInputStream());
    			//先判断图片是否宽于720
    	    	if(bi.getWidth()>=720) {
    			//如果宽于720就强制缩放成720
    			Thumbnails.of(file.getInputStream()).size(720, bi.getHeight()).toFile(saveDir);
    	    	}
    		} catch (Exception e) {
        		try {
        			//如果失败转存
        			file.transferTo(saveDir);
        		} catch (Exception e1) {
        			e1.printStackTrace();
        		}
        		e.printStackTrace();
        	}
    		}
        return list;
    }

ServiceImpl实现类

public int insertfunds(Funds funds) {
		return fundsDao.insert(funds);
	}
	
	public String IsNull(Funds funds) {
		if(funds.getFundsimgs()==null) {
			return"非法访问";
		}
		if(funds.getFundsname()==null) {
			return"非法访问";
		}
		if(funds.getFundsdesc()==null) {
			return "非法访问";
		}
		if(funds.getFundsphone()==null) {
			return "非法访问";
		}
		if(funds.getAdminid()==null) {
			return "非法访问";
		}
		if(funds.getFundsprice()==null) {
			return "非法访问";
		}
		return "";
	}

对应的Mapper.xml的实现语句

 

<insert id="insert" parameterType="com.kenya.bean.Funds">
    insert into kenya_funds (fundsId, fundsName, fundsPrice,
      fundsDesc, fundsPhone, fundsImgs,
      fundsImg1, fundsImg2, fundsImg3,
      fundsImg4, fundsUser, adminId
      )
    values (#{fundsid,jdbcType=INTEGER}, #{fundsname,jdbcType=VARCHAR}, #{fundsprice,jdbcType=REAL},
      #{fundsdesc,jdbcType=VARCHAR}, #{fundsphone,jdbcType=VARCHAR}, #{fundsimgs,jdbcType=VARCHAR},
      #{fundsimg1,jdbcType=VARCHAR}, #{fundsimg2,jdbcType=VARCHAR}, #{fundsimg3,jdbcType=VARCHAR},
      #{fundsimg4,jdbcType=VARCHAR}, #{fundsuser,jdbcType=VARCHAR}, #{adminid,jdbcType=INTEGER}
      )
  </insert>

以及成果