測試用網址

發表文章

目前顯示的是有「AJAX」標籤的文章

JavaScript 處理檔案上傳

6月 02, 2023

透過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...

閱讀完整內容

Ajax上傳文件至MVC的controller

12月 13, 2021

< input id = "false_fileBox" name = "false_fileBox" placeholder = "點此選擇檔案" type = "text" />  < input id = "fileBox" name = "fileBox" onchange = "inFalseFilebox(this,'false_fileBox')" style = "margin-top: -27px; margin-bottom: 8px; width: 100%; opacity: 0;" type = "file" class = "file" />  < button type = "button" onclick = "fileUpload('fileBox')" > 上傳 </ button > 紅色這段應該也可以直接使用 <input id= " file " type= " file " > 直接呈現甚至不需要Onchange就可以呈現目前選取的資料名稱 //第一個是在真的filebox中設定onchange //讓真的filebox接收到檔案時，可以同步把檔案路徑名稱放進假的textbox中 //不然真的filebox被隱藏了，使用者也無法看到自己選擇了哪個檔案。 function inFalseFilebox ( obj,id ) { $( '#' +id).val(obj.value);...

閱讀完整內容

ajax 動態載入html後不能執行其中的js解決方法(後續更新使用Razor可以執行)

12月 13, 2021

前端這邊的寫法跟參考的有所差距原因是帶資料進去不知道為何帶回去之後alert出來的並不是js代碼而是String 因此我就直接讓他alter出來即可 @* 這邊是在處理上傳資料 *@ <input type="file" id="fileupload" name="fileupload" accept=".xlsx" multiple="multiple" /> <input type="submit" id="fileSubmit" name="fileSubmit" class="btn btn-primary" value="寫入資料庫" /> @if (ViewBag.msg != null) { <alert> @ViewBag.msg </alert> } <script> $("#fileSubmit").on("click", function () { var file = $("#fileupload").val; if (file == null || file == "") { alert("無上傳檔案"); } else { var file = document.getElementById("fileupload").files; var fileData = new FormData(); for (var i = 0; i < file.length; i++) { fileData.append("fi...

閱讀完整內容

Controller 獲得 View的幾個方法

12月 10, 2021

有稍微幾種語法第一種是常用的ajax $.ajax({ type:"POST", data:data //data可以先自行包東西進去通常是包個json進去 //data:{ data:"data" , bata:"bata" } //Url: @Url.Action("Action" , "Controller"), //Razor //Url:"Controller/Action", //MVC Url:"URL", }); 大致上是這樣還可以用error 或者success 之類的東西測試成功失敗第二種是直接用OnClick 裡面也算是透過Razor的部分 <button ... onclick="window.open('@Url.Action("Action" , "Controller" , new { target = "_blank" , count = 1})')"> 後面的new {...} 裡面的值會自動轉換成?... 也就是變成 ?count=1&...的型態第三種是MVC的功能 @using (Html.BeginForm("Action" , "Controller")){ //是一個Razor提供的方法用Submit可以把目前頁面View的Model回傳至後端 } 以上三種應該都能用Public ActionResult Action(){return View();}接而由於MVC系列的Model會自動對上，因此後端地接收回傳值甚至可以寫個Model去接他只要裡面屬性的名字跟回傳值有對上就好如data:{data:"999"} 那Model如果裡面有 data的話就可以呼叫 Model.data 得到會是999 補充方法 1. /* HTML section */ <html> .......... <button...

閱讀完整內容

jQuery Tabs

2月 18, 2021

< link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" > < link rel = "stylesheet" href = "/resources/demos/style.css" > < script src = "https://code.jquery.com/jquery-1.12.4.js" > </ script > < script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > </ script >  (type A) //在同一個頁面上進行 $(function(){ $( "somevalues" ).tabs(); }); <div id="somevalues"> <li><a href="#divid-1">TagName-1</a></li> <li><a href="#divid-2">TagName-2</a></li> <li><a href="#divid-3">TagName-3</a></li> <div id="divid-1"> 1 </div> <div id="divid-2"> 2 </div> <div id="divid-3"> 3 </div> </div> (type B) 用C#畫出圖形 aspx $(function(){ ...

閱讀完整內容

FileUpload 透過 Input file

1月 06, 2021

<前端讀取> <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, })

閱讀完整內容

Jquery & AJAX

12月 28, 2020

是一個JavaScript的函式庫，極大的簡化了JavaScript的流程 $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); "p"處可塞任意元素 p 選取所有<p>的元素 p.infor 選取<p>中所有class為infor的元素 .infor 選取所有class = infor 元素 #infor 選取所有id = infor 元素 ul li:first 選取第一個ul的第一個li元素 ul li:first 選取每一個ul的第一個li元素 [href$='.jpg'] 選取所有帶有jpg結尾的屬性值並且帶有href屬性 a[target='_blank'] 選取所有帶有blank屬性的a元素 div#infor .head 所有 div元素中 id = infor 的並且class = head的元素 :disabled 所有disabled的元素都將選取 Jquery事件 (document).ready(function(){}); Mouse Events click , dbclick(double - click) , mouseenter , mouseleave mousedown , mouseup , hover , focus Keyboard Events keypress , keydown , keyup Form Events submit , change , focus , blur Doucunent load , resize , scroll , unload hide(); 可以放 "fast" , " slow" 和數字是以千分之一秒計時，ex 1000 = 1second 隱藏 toggle(); 同樣可以放 "fast" , " slow" 和數字可以同時兼顧隱藏跟顯示 fadeIn(); 淡入可以放 "fast" , " slow" 和數字是以千分之一秒計時，...

閱讀完整內容

AJAX 基礎

10月 20, 2020

AJAX是一個使用JavaScript來進行非同步通訊交換XML的技術，Java以及Flash很久以前就在用了好處是可以使使用者幾乎完全不用等待就可以產生頁面在瀏覽器中，AJAX提供的是應用程式方面的工作，不用再等伺服器執行工作，AJAX把伺服器需要做的工作搬到瀏覽器上進行。在伺服器中，AJAX是負責傳輸資料的，在這裡區分，與原來網頁部分相同的稱為內容，而需要更改的部分稱為資料，AJAX負責搬運資料

閱讀完整內容