Automatically save drafts, but how to throw the picture (input file) to the backend? Not through the form way

I use the keyup event to automatically save fields to the database

html

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

ajax

$("body").on("keyup", "-sharpcontent, -sharptitle", function(e){

var content = $(".note-editable").html();
var title = $("-sharptitle").val();
var file = $("-sharpfile").val();

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

but there is a problem
there is an input file,
how can I get him to automatically throw files to the backend? (when input on change)
but this is not in form form. Just take the value and drop the backend
I find that adding this doesn"t work at all

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

if I don"t go through the form, how to get the picture file of input file so that I can move_uploaded_file?

Jquery ajax mysqli php7 php

Oct.26,2021

General more ways
file
images using formdata and h5 are returned via the backend path or marked to the front end

automatic saving is not recommended to use keyup, but interval or timeout recursion.
you can upload pictures with formdata

upload files using FormData objects use documents < / P >

wrote an article for reference: front-end picture direct transmission OSS experiment

Previous: Use vue to modify the function and click to edit and adjust the update API to successfully jump to my list page view can not be automatically updated to manually refresh the view to change

Next: Vue's questions about multiple pages and single pages