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

原创 2018年04月17日 15:41:07

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="取消" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'"></div>
<div class="btn_box floatR"><input id="inserfunds" name="" type="button" value="提交" onmousemove="this.className='input_move'" onmouseout="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.onload=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].onchange=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>

以及成果


网站响应式开发流程以及响应式图片视频教程

本课程主要介绍了如何制作响应式网站,从html,css排版到media,到响应式图片和组件的讲解以及实战
  • 2017年09月24日 15:09

使用FormData进行Ajax请求异步上传图片案例

工作时遇到一个对轮播图管理的需求,开发过程遇到些问题,总算顺利解决,记录下来供大家参考。原项目是基于SSM框架搭建的,现将Ajax图片上传部分分享如下: 1.dao层代码    insert i...
  • wf787283810
  • wf787283810
  • 2017-07-07 15:40:40
  • 737

ssm框架下fileupload图片上传实践

参考这篇博客操作http://blog.csdn.net/jronzhang/article/details/612107001、加入两个jar包,commons-fileupload-1.3.jar...
  • luyiluba
  • luyiluba
  • 2017-07-05 13:01:51
  • 9063

PHP+jQuery+Ajax多图片上传

  • 2016年03月31日 16:33
  • 81KB
  • 下载

ajax多文件上传图片文件带预览功能

  • 2014年12月29日 16:36
  • 192KB
  • 下载

SSM利用接口的方式上传文件,js调用接口上传文件,ajax利用接口上传文件

需要引用ssm上传文件的工具包 commons-fileupload commons-fileupload 1.3.1 编写接口的需要的引用的上传文件类 ...
  • Name_CHC
  • Name_CHC
  • 2017-06-08 10:38:12
  • 1757

SSH+jquery+ajax实现上传图片并回显

从昨天到今天弄了好久,网上找的还是不是很全面。有些代码看的不清不楚的。有点费解。 担心自己后面也忘记了,特此记录。 先贴代码, jsp中:要先导入jquery.js和Ajaxupload.js两...
  • Ljh19910112
  • Ljh19910112
  • 2014-03-02 00:46:15
  • 3876

Ajax异步上传在SSM框架中的应用

最近在做毕业设计,由于毕设中要实现图片上传和视频上传的功能。突然发现原来的Form表单中的file已经满足不了我了,于是在一番折腾之后终于让我找到了一个简便的上传方式。下面来和大家分享一下我的过程。 ...
  • qq_33624558
  • qq_33624558
  • 2017-12-24 15:58:32
  • 675

基于SSM使用jquery.from.js实现ajax文件上传

前端JSP页面代码 提交
  • hongguapi
  • hongguapi
  • 2017-12-21 15:36:15
  • 400

基于SSM框架的多文件上传Controller类编写

前端代码 ...
  • fitAllEnv
  • fitAllEnv
  • 2017-05-19 15:43:44
  • 4094
收藏助手
不良信息举报
您举报文章:基于SSM的多图片Ajax上传添加以及图片缩放
举报原因:
原因补充:

(最多只允许输入30个字)