javascript - JQuery 如何傳遞input file的內容至PHP進行處理

今天問題高產似母豬...

通過下列代碼，我已經擷取了 filemeta 也就是被選中的那個檔案。

    $('#coverfile').on('change', '', function() {        var filemeta = $('#coverfile').prop('files')[0];    });

然後我有一個btn按鈕，需要通過點擊後ajax的方式傳遞這個被選中的圖片，然後在php檔案中進行處理。
但是我不知道應該怎麼去傳遞這個擷取過來的filemeta

本來我想傳遞base64過去的，因為預覽圖片我使用的是轉換為base64進行預覽的，但是這個轉換後的位元組太大了，php檔案位元組報500錯誤，所以我得換個辦法...

回複內容：

今天問題高產似母豬...

通過下列代碼，我已經擷取了 filemeta 也就是被選中的那個檔案。

    $('#coverfile').on('change', '', function() {        var filemeta = $('#coverfile').prop('files')[0];    });

然後我有一個btn按鈕，需要通過點擊後ajax的方式傳遞這個被選中的圖片，然後在php檔案中進行處理。
但是我不知道應該怎麼去傳遞這個擷取過來的filemeta

本來我想傳遞base64過去的，因為預覽圖片我使用的是轉換為base64進行預覽的，但是這個轉換後的位元組太大了，php檔案位元組報500錯誤，所以我得換個辦法...

用FormData對象提交。注意IE只有版本10以上支援。

FormData對象怎麼來呢，有兩種方法。

方法一：表單就是FormData

HTML代碼：

JS代碼：

var formElement = document.getElementById("fileform");//jQuery可以像這樣：//var formElememt = $("#fileform")[0];var formData = new FormData(formElement);

方法二：自己構造

HTML代碼：

JS代碼：

var fileInput = document. getElementById("file");//用jQuery可以這樣：//var fileInput=$("#file")[0];var file = fileInput.files[0];    //獲得File對象(也就是你那個filemeta)，這裡檔案是單選的，如果是多選的需要遍曆fileInput.files屬性來擷取每一個檔案var formData = new FormData();formData.append("file", file);    //FormData對象的append方法第一個參數相當於input的name屬性，第二個參數就是value，可以是File對象

用jQuery發送請求

$.ajax({    type: "POST",    //必須POST    url: "http://example.com",    //接收請求的URL    processData: false,    //必須設定    contentType: false,    //必須設定    data: formData    //直接把formData對象作為data屬性的值發送    //其他參數參數自行設定})

參考

MDN是個好東西，要學會用

https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

