文件上传前后端

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013447988/article/details/84099104

##1.使用boostrap-fileinput插件
原生的文件上传不太好像，所有使用boostrap-fileinput插件进行文件上传

引入

 	<base href="/sendPayMail/" target="_self">
    <script src="static/jquery/jquery-2.1.3.min.js"></script>
    <script src="static/bootstrap/js/bootstrap.min.js"></script>
    <script src="static/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="static/bootstrap-fileinput/js/locales/zh.js"></script>

	<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="static/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" type="text/css">

html页面

<input type="file" name="file2" id="txt_file2" multiple class="file" data-show-preview="false"/>

初始化上传文件框

//初始化上传文件框
$("#txt_file2").fileinput({
    language: 'zh',  //设置语言
    uploadUrl: "salaryOper/uploadFile.do",
    showUpload: false,
    enctype: 'multipart/form-data'
});

##2.使用Query.form.js进行表单提交

Query.form.js是一个form插件，支持ajax表单提交和ajax文件上传

  <form id="formMail" action="salaryOper/sendMail.do" class="form-horizontal" enctype="multipart/form-data" method="post">
                            <div class="form-group">
                                <label for="txt_file2" class="col-sm-2 control-label">上传工资条模板</label>
                                <div class="col-sm-10">
                                    <input type="file" name="file2" id="txt_file2" multiple class="file" data-show-preview="false"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-success">发送邮件</button>
                                </div>
                            </div>
                        </form>


$(function(){
        $("#formMail").ajaxForm(function(data){
			//处理表单提交后，后端返回给前端的信息
            layer.alert(data);
        });
    });

3.使用CommonsMultipartFile类获取前端上传的文件

@RequestMapping(value = "/sendMail.do",produces="text/html;charset=UTF-8")
    @ResponseBody
    public String  sendMail(@RequestParam("file2") CommonsMultipartFile file2, HttpServletRequest request) {
		
	}

注意@RequestParam里面的名字要和表单中上传文件框的name属性一致