form表单+jquery上传图片

html代码

<form method="get" id="upload-form" class="upload-form" enctype ="multipart/form-data">
    <div id="uploadChecks"><p class="uploadTip">点击上传</p></div>
    <input id="upload-inp" style="display: none" type="file">
</form>

css代码

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    #uploadChecks{
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
    }
    .uploadTip{
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background: rgba(0,0,0,0.2);
        color: #fff;
        font-size: 13px;
        line-height: 100px;
        text-align: center;
        display: none;
    }
</style>

js代码

<script>
    $("#uploadChecks").mouseover(function(){
        $(".uploadTip").show();
    }).mouseleave(function(){
        $(".uploadTip").hide();
    })
    //上传
    $("#uploadChecks").click(function () {
        $("#upload-inp").click();
        $("#upload-inp").on("change",function(e){
            //获取图片的路径，并显示出来
            var objUrl = getObjectURL(this.files[0]);
            if (objUrl) {
                $("#uploadChecks").css({
                    "background":"url("+objUrl+")",
                    "background-size":"cover"
                })
            }
            //获取上传图片包
            var formdata = new FormData()// FormData对象，来发送二进制文件。
            formdata.append("file",e.currentTarget.files[0]);// 将文件追加到 formdata对象中
            $.ajax({
                url:'',//上传接口
                type:'POST',
                data:formdata,
                processData: false,//必须false才会避开jQuery对 formdata 的默认处理， XMLHttpRequest会对 formdata 进行正确的处理
                contentType: false,// 告诉jQuery不要去设置Content-Type请求头
                success:function(res){
                    console.log(res)
                },
                error: function (res) {
                    console.log("发生错误")
                }
            })
        })
    });
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>