ajax文件上传

 

<!-- Modal -->
<div class="modal fade" id="myModal" style="margin-top: 10%" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">图片上传</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <form method="post" id="img_upload" action="${request.contextPath}/slideshow/fileUpload" enctype= "multipart/form-data">
                    <div class="form-group">
                        <label for="weight">权重</label>
                        <input type="text" class="form-control" id="weight"  name="weight" placeholder="请输入数字" required onkeyup="this.value=this.value.replace(/\D/g,'')">
                    </div>
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="text" class="form-control" id="title" placeholder="请输入标题">
                    </div>
                    <div class="form-group">
                        <label for="file">图片上传</label>
                        <input type="file" name="file" required id="file">
                        <p class="help-block">请选择图片</p>
                    </div>
                    <span id="btn_upload" class="btn btn-primary">上传</span>
                </form>
            </div>
        </div>
    </div>
</div>

$(function () {
        $("#btn_upload").click(function () {


            let title = $("#title").val();
            let file = $('#file')[0].files[0];
            let weight = $("#weight").val();

            let formData = new FormData();

            formData.append("file",file);
            formData.append("title", title);
            formData.append("weight", weight);

            $.ajax({
                url: "${request.contextPath}/slideshow/fileUpload",
                dataType:'json',
                type:'POST',
                async: false,
                data: formData,
                processData : false, // 使数据不做处理
                contentType : false, // 不要设置Content-Type请求头
                success:function(data){
                    if(data.result === 200){
                        //
                    }else if(data.result === 201) {
                        //
                    }else if( data.result === 220 ){
                        //
                    } else {
                        //
                    }
                },
                error:function(response){
                    console.log(response);
                }
            });
        });
    });