自动保存草稿，但如何将图片（input file）如何丢到后端？不透过 form 的方式

Question

我利用keyup事件使栏位可以自动保存到数据库

html

<input type="file" id="file" name="cover" accept="image/jpeg, image/png, image/jpg">

ajax

$('body').on('keyup', '#content, #title', function(e){

var content = $('.note-editable').html();
var title = $('#title').val();
var file = $('#file').val();

$.ajax({
      type: "POST",
      url: "auto-save",
      data: {
        "content": content,
        "title": title,
        "file": file
      },
      dataType: "text",
      success: function(data){

但有个问题
里面有个 input file，
我要如何使他能自动将档案丢到后端去？（当 input on change的时候）
但这不是form 形式，单纯取值丢后端
我发现加上了这个完全行不通呢

enctype: "multipart/form-data",
cache: false,
contentType: false,
processData: false,

如果不透过表单的方式，怎么抓到 input file 的图片文件，好让我可以move_uploaded_file？

Answer 1

写过一篇可做参考：前端图片直传OSS试验

Answer 2

一般更多方式
采用formdata和h5的file
图片经后端返回路径或标识给前端

Answer 3

自动保存不建议使用keyup，而是 interval或者timeout递归。
上传图片可以用formdata

Answer 4

使用 FormData 对象上传文件 使用文档