springmvc文件上传(ajax请求 带参数)

2023-02-25 17:23:06 浏览数 (2)

前言

这里用ajax文件上传,并携带几个参数,网上查到的大多都是没带参数只有文件的。 由于我项目代码太多,这里只给出关键代码。

操作

我用的SSM框架,传之前,先在WEB-INF/dispatcherServlet-servlet.xml中配置multipartResolver

代码语言:javascript复制
<!-- 文件上传 -->
	<bean id="multipartResolver"
		  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- 设置上传文件的最大尺寸为1MB -->
		<property name="maxUploadSize" value="1048576" />
		<!-- 字符编码 -->
		<property name="defaultEncoding" value="UTF-8" />
	</bean>

前端代码

html部分(主要代码)

代码语言:javascript复制
 <form  method="post" class="form-horizontal" id="addform"  enctype="multipart/form-data">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">商品编码</label>
                                <div class="col-sm-8 controls">
                                    <input type="text" value="" class="form-control" name="code"
                                           id="product_code" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">商品名称</label>
                                <div class="col-sm-8 controls">
                                    <input type="text" value="" class="form-control" name="name"
                                           id="product_name" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">商品类型</label>
                                <div class="col-sm-8 controls">
                                    <select class="form-control productTypeId" name="type.id" id="product_type">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">商品品牌</label>
                                <div class="col-sm-8 controls">
                                    <input type="text" value="" class="form-control" name="brand" id="product_brand"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">商品数量</label>
                                <div class="col-sm-8 controls">
                                    <input type="text"  class="form-control" name="num" id="product_num"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">商品价格</label>
                                <div class="col-sm-8 controls">
                                    <input type="text"  class="form-control" name="price" id="product_price"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">商品介绍</label>
                                <div class="col-sm-8 controls">
                                    <input type="text" value="" class="form-control" name="intro" id="product_intro"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">商品状态</label>
                                <div class="col-sm-8 controls">
                                    <select class="form-control productTypeId" name="status" id="product_status">
                                        <option value="1">在售</option>
                                        <option value="0">下架</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="file" class="col-sm-3 control-label">商品图片</label>
                                <div class="col-sm-8 controls">
                                    <input type="file" class="form-control" name="file" id="file"/>
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <input type="submit" class="btn btn-gmtx-define1 center-block">
                                        添加
                                    </input>
                                </div>
                            </div>
                        </form>

javascript部分(主要代码)

代码语言:javascript复制
 function addProduct() {
            //先获取表单中输入的值
            var code=$('#product_code').val();
            var name=$('#product_name').val();
            var type=parseInt($('#product_type option:selected').val());
            var brand=$('#product_brand').val();
            var num=$('#product_num').val();
            var price=$('#product_price').val();
            var intro=$('#product_intro').val();
            var status=parseInt($('#product_status option:selected').val());
            var myform=new FormData();
            myform.append('file',$('#file')[0].files[0]);
            myform.append('code',code);
            myform.append('name',name);
            myform.append("type.id",type);
            myform.append('brand',brand);
            myform.append('num',num);
            myform.append('price',price);
            myform.append('intro',intro);
            myform.append('status',status);

            $.ajax({
               url:'/ssm_test/productinfo/addProduct',
               type:'post',
               async:'true',
               cache: false,
                data:myform,
                contentType: false,
                processData:false,
                dataType:'json',
                success:function (data) {
                    if (data.success){
                        swal({
                           title:"系统提示",
                           text:'添加成功',
                           type:'success'
                        });
                        //先置空添加对话框中的表单内容
                        var code=$('#product_code').val('');
                        var name=$('#product_name').val('');
                        // var type=$('#product_type option:selected').val();
                        var brand=$('#product_brand').val('');
                        var num=$('#product_num').val('');
                        var price=$('#product_price').val('');
                        var intro=$('#product_intro').val('');
                        // var status=$('#product_status option:selected').val();
                        $('#addProduct').modal('hide');
                        $('#table').bootstrapTable("refresh");
                    }else{

                    }
                }
            });
        }

后端代码

实体类

代码语言:javascript复制
package com.ssm.pojo;

public class ProductInfo {
	// 商品基本信息(部分)
	private int id; // 商品编号
	private String code; // 商品编码
	private String name; // 商品名称
	// 关联属性
	private Type type;    // 商品类型

	private String brand; // 商品品牌
	private String pic; // 商品小图
	private int num; // 商品数量
	private double price; // 商品价格
	private String intro; // 商品介绍
	private int status; // 商品状态	

	private double priceFrom;
	private double priceTo;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getIntro() {
		return intro;
	}

	public void setIntro(String intro) {
		this.intro = intro;
	}

	public String getBrand() {
		return brand;
	}

	public void setBrand(String brand) {
		this.brand = brand;
	}

	public double getPrice() {
		return price;
	}

	public void setPrice(double price) {
		this.price = price;
	}

	public int getStatus() {
		return status;
	}

	public void setStatus(int status) {
		this.status = status;
	}

	public String getPic() {
		return pic;
	}

	public void setPic(String pic) {
		this.pic = pic;
	}
	
	public int getNum() {
		return num;
	}

	public void setNum(int num) {
		this.num = num;
	}

	public double getPriceFrom() {
		return priceFrom;
	}

	public void setPriceFrom(double priceFrom) {
		this.priceFrom = priceFrom;
	}

	public double getPriceTo() {
		return priceTo;
	}

	public void setPriceTo(double priceTo) {
		this.priceTo = priceTo;
	}

	public Type getType() {
		return type;
	}

	public void setType(Type type) {
		this.type = type;
	}

	@Override
	public String toString() {
		return "ProductInfo{"  
				"id="   id  
				", code='"   code   '''  
				", name='"   name   '''  
				", type="   type  
				", brand='"   brand   '''  
				", pic='"   pic   '''  
				", num="   num  
				", price="   price  
				", intro='"   intro   '''  
				", status="   status  
				", priceFrom="   priceFrom  
				", priceTo="   priceTo  
				'}';
	}
}

control层

代码语言:javascript复制
 //添加商品
    @RequestMapping(value = "/addProduct",produces = "text/html;charset=UTF-8")
    @ResponseBody
    public String addProduct(ProductInfo pi, HttpServletRequest req, ModelMap model,
                             @RequestParam(value = "file",required = false)MultipartFile file){
        //服务器端upload文件夹物理路径
        String path=req.getSession().getServletContext().getRealPath("product_images");
        //获取文件名
        String fileName=file.getOriginalFilename();
        //实例化一个File对象,表示目标文件(含物理路径)
        File targetFile=new File(path,fileName);
        if(!targetFile.exists()){
            targetFile.mkdirs();
        }
        try{
            //将上传文件写到服务器上指定的文件
            file.transferTo(targetFile);
            pi.setPic(fileName);
            productInfoService.addProductInfo(pi);
            return "{"success":"true","message":"商品添加成功"}";
        }catch (Exception e){
            return "{"success":"false","message":"商品添加失败"}";
        }
    }

service层

代码语言:javascript复制
@Override
    public void addProductInfo(ProductInfo pi) {
        productInfoDao.save(pi);
    }

Dao层

代码语言:javascript复制
 //添加商品
    @Insert("insert into product_info(code,name,tid,brand,pic,num,price,intro,status)"  
            "values(#{code},#{name},#{type.id},#{brand},#{pic},#{num},#{price},#{intro},#{status})")
    @Options(useGeneratedKeys = true,keyProperty = "id")
    void save(ProductInfo pi);

0 人点赞