前端使用jQuery+ajax+formdata上傳圖片加信息方法

html部分：

<form name="add">
    <input type="number" name="ldmLotteryId" id="ldmLotteryId">//其餘信息
    <br>
    圖片: &nbsp;<input type="file" name="storeimgsrc" id="storeimgsrc" accept="imgage/*" onchange="base64()">//圖片信息
    <img id="img_upload_show"/>//圖片預覽區
    <input type="hidden" name="img_upload_base" id="img_upload_base"/>//隱藏框(存儲base64碼字符串)

</form>
<button type="submit" onclick=postInfo("url")>新增</button>//提交框(url是你須要提交的地址)

圖片轉base64碼方法

<script type="text/javascript">

function base64() {

    var input = document.querySelector('input[type = "file"]');

    var file = input.files[0]
    console.log(file);

    var reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = function () {
        $("#img_upload_show").attr("src", this.result);//將轉換後的編碼存入src完成預覽
        $("#img_upload_base").val(this.result);//將轉換後的編碼保存到input供後臺使用
        console.log(this.result)
        var img = $("#img_upload_base").val();
        var imgNum = img.split(",base64,");

        console.log(imgNum)
        var imgBase = imgNum[1];
        console.log(imgBase);

    }

}

提交前將數據轉成json格式的方法

function postInfo(url) {


    var form = document.add;

    if (form == null) {
        console.log("---");
    } else {
        var obj = {};
        for (var i = 0; i < form.length; i++) {


            obj[form[i].name] = form[i].value;

        }
        var json = JSON.stringify(obj);


        console.log(json)

        testPost(url, json);

    }
}

ajax提交方法

function testPost(URL, PARAMS) {
    console.log("-----------")
    console.log(PARAMS)
    $.ajax({
        type: "post",
        contentType: "application/json",
        url: URL,
        data: PARAMS,
        success: function (data) {
            alert(data)
            console.log(data);
            if (data == "success") {
                alert("成功");
            } else {
                alert("失敗")
            }

        }

    })

}

</script>