1. 程式人生 > >formdata上傳多張圖片並顯示

formdata上傳多張圖片並顯示

js

function upImg(){

    formData.append('state', 0);
    formData.append('type', 0);

    $.ajax({
        url: "http://192.168.1.61:8080/WeMallManage/shopcommodity/uploadImg",
        type: 'POST',
        cache: false,
        data: formData,
        dataType:"json",
        timeout: 5000,
        //必須false才會避開jQuery對 formdata 的預設處理
        // XMLHttpRequest會對 formdata 進行正確的處理
        processData: false,
        //必須false才會自動加上正確的Content-Type
        contentType: false,
        xhrFields: {
            withCredentials: true
        },
        success:function(data) {
            //console.log(data.code);
                if(data.code=="000000"){
                    var data=data.data
                    //console.log(data.data);
                    sessionStorage.setItem("comm_img",data);
                    console.log(sessionStorage.getItem("comm_img"));
                    alert("圖片上傳成功");
                }else{
                    alert("圖片上傳失敗");
                }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {

        }
    })
}

html部分

<div class="layui-upload">
   <div>
      <input type="file" name="files[]" accept='image/*' id="picture" multiple="multiple"/>
   </div>
   <div id="previewImg">
   </div>

   <a id="upImg" class="layui-btn" style="margin-top: 20px;">上傳圖片</a>
</div>