Ajax 上傳檔案(input file FormData)
阿新 • • 發佈:2018-11-01
FormData物件用以將資料編譯成鍵值對,以便用XMLHttpRequest來發送資料。其主要用於傳送表單資料,但亦可用於傳送帶鍵資料(keyed data),而獨立於表單使用。
jQuery Ajax 上傳檔案
通過 Ajax 向後臺傳送檔案(包括圖片)時,其引數型別屬於物件。可以建立一個 FormData 物件,然後呼叫它的 append() 方法來新增欄位。
例如:
var formData = new FormData(); formData.append("username", "cedric"); formData.append("tel", 15866666666); //數字123456會被立即轉換成字串 "15866666666" // HTML 檔案型別input,由使用者選擇 formData.append("userfile", fileInputElement.files[0]);
例項應用
- html程式碼
<div class="form-group"> <label for="upload_crowd_name" class="col-sm-2 control-label">人群名稱</label> <div class="col-sm-10"> <input type="text" class="form-control" id="upload_crowd_name" placeholder="請輸入人群名稱"> </div> </div> <div class="form-group"> <label for="upload_crowd_desc" class="col-sm-2 control-label">人群說明</label> <div class="col-sm-10"> <textarea class="form-control" id="upload_crowd_desc" cols="20" rows="5"></textarea> </div> </div> <div class="form-group"> <label for="crowd_file" class="col-sm-2 control-label">上傳檔案</label> <div class="col-sm-10"> <input type="file" accept=".xlsx" id="crowd_file"> </div> </div>
- js程式碼
$('.submit').click(function () { var crowd_name = $.trim($('#upload_crowd_name').val()); var crowd_desc = $.trim($('#upload_crowd_desc').val()); var crowd_file = $('#crowd_file')[0].files[0]; var formData = new FormData(); formData.append("crowd_file",$('#crowd_file')[0].files[0]); formData.append("crowd_name", crowd_name); formData.append("crowd_desc", crowd_desc); $.ajax({ url:'/upload/', dataType:'json', type:'POST', async: false, data: formData, processData : false, // 使資料不做處理 contentType : false, // 不要設定Content-Type請求頭 success: function(data){ console.log(data); if (data.status == 'ok') { alert('上傳成功!'); } }, error:function(response){ console.log(response); } }); })
參考:
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects