jquery FormData异步提交文件

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

<style>
    .a-upload {
        padding: 4px 10px;
        height: 20px;
        line-height: 20px;
        position: relative;
        cursor: pointer;
        color: #888;
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        height: 33px;
    }


    .a-upload input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer
    }


    .a-upload:hover {
        color: #444;
        background: #eee;
        border-color: #ccc;
        text-decoration: none
    }


    .upload {
        margin-top: -25px;
        margin-left: 169px;
    }




</style>
<form id="uploadForm" enctype="multipart/form-data" class="cmxform form-horizontal adminex-form">
    <div class="form-group">
        <label class="col-sm-3 control-label ">小组LOGO</label>
        <div class="col-sm-9">
            <a href="javascript:;" class="a-upload">
                <input type="file" name="file" id="uploadPics">选择文件</a>
            <button id="upload" type="button" class="btn btn-warning upload"
                    onclick="uploadImage2('/groupInfo/uploadGroupPic')">
                上传
            </button>
        </div>
        <div class="text" id="img_area">


        </div>
    </div>
</form>
<script>
    function uploadImage2(url) {
        //判断是否有选择上传文件
        var imgPath = $("#uploadPics").val();
        if (imgPath == "") {
            alert("请选择上传图片！");
            return;
        }
        //判断上传文件的后缀名
        var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
        if (strExtension != 'jpg' && strExtension != 'gif'
                && strExtension != 'png' && strExtension != 'bmp') {
            alert("请选择图片文件");
            return;
        }


        $.ajax({
            url: url,
            type: 'POST',
            cache: false,
            data: new FormData($('#uploadForm')[0]),
            processData: false,
            contentType: false
        }).done(function (res) {
            $('#gi_ids').val(res);
            alert("上传成功");
        }).fail(function (res) {
            alert("上传失败，请检查网络后重试");
        });
    }
</script>