測試用網址

透過JavaScript處理檔案上傳 首先介紹Html Code <input type="file" id="uploadfile" accept=".png , . jpg" multiple="multiple"> accept 是接受檔案類型 .後接檔案類型 用 , 做分割 multiple 是否接受多個檔案上傳 取得目標檔案相關內容 alter(document.getElementById(uploadfile).files); 這樣會丟出一個file的陣列，取得裡面的值要用document.getElementById(uploadfile).files[0]就可以取得目標值了。 AJAX上傳資料 let form = new FormData(); form.append("product[photos][]" , document.getElementById(uploadfile).files[i]) // fetchAPI fetch('API URL'),{     method : 'POST',     body : form, } // JQuery $.ajax({    processData : false,     data : form        }) 以下是從 這邊  取得的程式碼 紅色為新增部分，修改排版 Html <div class="container p-5">     <h2 class="mb-5 text-center">File Upload with JavaScript</h2> @*用於排版用*@     <div class="row">         <div class="col-4"></div>         <label class="text-center mb-5 image-preview-wrapper col-4 " style="marg...

 JSON全名為 JavaScript Object Notation (Json) 為結構化的資料，用於呈現JavaScript的標準格式 JSON的架構 如     "JSONName" : "JSON",     "Year" : 2022,     "Active" : "true",     "Members" : [          "Name" : "jay",          "Age" : 19,          "Address" : [               "City" : "NewTaipei",               "Area" : "Banq",               "Floor" : 15           ]      ] 若把這個結構儲存給 People 則會變成 People.Year = 2022 People["Active"] = true People["Member"][0][Address][0] = NewTaipei 接收的方法為 var requestURL = 'URL'; var request = new XMLHttpRequest(); request.open('GET' , requsetURL); request.responseType = 'json'; requset.send(); request.onload = function(){     var rqstring = request.response;     var JSONName = rqstri...

<前端讀取> <input type = "file" id = "fileupload" accept = ".zip" multiple ="multiple" /> accept：可以接收的資料類型限制 accept = ".zip" 限定只能用zip上傳 同理可以 .image .png multiple：true , false ，可以一次上傳多筆資料，預設false 多種則是 .image , .png , .zip let fileUpload = document.querySelector('#fileupload'); fileUpload.addEventListener('change' . function(e){   console.log(e.target.files[0]); }) e.target.files 是一個file陣列 通常因為沒有一次上傳多筆資料因此可以用[0]抓取目標 此時的檔案並無法取得內容，只能取得檔案資訊，如name,size,type let form = new FormData(); form.append("product[photos][]" , e.target.files[0]); //jQuery aJax({     processData:false,     data:form, })