Ajax Image Upload Based on firefox,

Ajax Image Upload Based on firefox,

There are many protocols for uploading image files. This is mainly about the form of "Content-Type: multipart/form-data.

At work, some static files on the front-end are referenced by the FTL template System and the front-end pages are referenced by SSI. A large number of static SHTML files need to be generated during project development, I thought it should be a back-end thing, but since I joined this company, this fast thing has been handed over to the front-end ~~ I'm speechless, So I can't just follow my habits, but I'm a lazy, just wondering if I can submit through ajax.

Based on the usual reading of MDN, today we mainly use the FormData object to solve the multi-File Upload protocol.

Https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData

Everything seems perfect, but the File method can only run at the chrome level. Image uploading cannot be implemented. Generally, normal files can be implemented through Blob objects.

The following describes how to implement this process.

1. After searching for a long time, all the methods for converting URLs into File objects fail...

2. HTML5 File direction

A. Use the HTML5 File example to start

Https://developer.mozilla.org/en-US/docs/DOM/FileReader

In the example, print oFREvent.tar get. result and find "data: image/jpeg; base64,/9j/4 AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ ..."

Originally base64-encoded data

When we see the above encoding data, we can see whether Blob objects are supported. The Code is as follows:

var fd = new FormData();fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg"}));fd.append('my-file', new Blob(["data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."],{type:"image/jpeg;base64"}));

B .. I think base64 is encoded. Can I decode it by using the method?

I found an example of base64 encoding and decoding on the Internet.

fd.append('my-file', new Blob([new Base64().decode('/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ...')],{type:"image/jpeg"}));

Packet Capture found that normal file transfer is not the same as ajax data, it must have failed

3. the browser page level is for security. It seems that you have to manually select files.

Https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects

Copy codeThe Code is as follows: fd. append ('My-file', document. querySelector (Selector). files [0])
In fact, it was misled by the File api at the beginning and always thought it was at the page level.

I suddenly found that this method is used at the top of the last address .. It seems that things are not serious, and some detours have taken place.

Note: by adding a function to the oil monkey plug-in and supporting the chrome-level File method, we can easily upload photos.

The above is all the content of this article. I hope you will like it.