包含圖片的form表單提交方法提交方式爲ajax(不須要轉成base64碼)

進行上傳以前須要用maven導包

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>
而後在spring-mvc.xml中添加配置文件

<bean id="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="204800"/>
</bean>
配置方面暫時就是這樣了，而後是前端方面
先寫兩個form表單分別爲圖片提交和表單信息提交

<!--該處爲信息提交處，記得要寫id-->

<form name="add" id="formSub">
    <input type="number" name="ldmCommodityId" id="ldmCommodityId">
    <br>
    <input type="number" name="ldmLotteryId" id="ldmLotteryId">

</form>
<!--此處爲圖片信息提交處，同上要有id-->
<form id="uploadPic">
    圖片: &nbsp;<input type="file" name="storeimgsrc" id="storeimgsrc" accept="imgage/*" onchange="base64()">
</form>
<button type="submit" onclick=postInfo("url")>新增</button>

//圖片預覽區的div

<div style="float: right" id="imgShow" class="imgShow" hidden=true>
    <img id="img_upload_show"/>
</div>

下面就是jQuery部分了(這部分的一些配置就不寫出來了)

<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完成預覽
    }
}


//這是ajax提交方法

function postInfo(url) {

    var formData = new FormData($("#uploadPic")[0]);
    var json = JSON.stringify($("#formSub").serializeArray());
    formData.append("json", json)

    $.ajax({
        type: "POST",
        url:  url,
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            alert(data)
            console.log(data);
            if (data == "success") {
                alert("成功");
             
            } else {
                alert("失敗";
            }
        }
    })
}

</script>