Ajax-based image upload _ajax related to Firefox

Picture file Upload, there are many kinds of agreement, this time the main talk is "content-type:multipart/form-data;" The form.

At work at the front desk some static files are through the FTL template system, the front page is referenced through SSI, project development time will need to generate a large number of static shtml files, originally felt should be backstage things, but since I entered this company, this quick thing to the front end ~ ~ I said no words, No way to do it according to the habit, but I am a lazy person, I think can be submitted through Ajax

Based on the usual MDN browsing, today is mainly formdata this object to solve the multiple file upload protocol.

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

It seems that everything is perfect, but in the file method, it can only be run at the chrome level. Image upload can not be implemented, general normal files through the Blob object implementation

Here are some ways to do this, an exploratory process

1. Looking for a long time, the URL into the file object method, have failed ...

2.HTML5 File Direction

A. Through the example of HTML5 file, start

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

In the example, the print oFREvent.target.result just found the "DATA:IMAGE/JPEG;BASE64,/9J/4AAQSKZJRGABAQEASABIAAD/2WBDAAUDBAQEAWUEBAQFBQ ..."

It's base64 encoded data.

See the encoded data above, I think the Blob object is not supported Ah, 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.. Think of the Base64 is encoded over, by means of decoding is not able to

On the Internet to find a section of Base64 code decoding example, set a

Fd.append (' My-file ', New Blob ([New Base64 (). Decode ('/9j/4aaqskzjrgabaqeasabiaad/2wbdaaudbaqeawuebaqfbq ... ')],{ Type: "Image/jpeg"}));

Grab bag found that the normal transfer of files and Ajax data is not the same, it must be a failure

3. Browser page level for security, it appears that the choice of file operation is to manually under the

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

Copy Code code as follows:

Fd.append (' My-file ', Document.queryselector (Selector). Files[0])

In fact, initially or by the file API to mislead, always thought to be page level other

Suddenly found that the last address inside the top is the use of this method. It seems that things are not serious, take some detours.

PostScript, by adding the function to the oil monkey plug-in, and supporting the chrome-level file method, we can upload the photos conveniently.

The above mentioned is the entire content of this article, I hope you can enjoy.