Shulou(Shulou.com)06/03 Report--

Editor to share with you how to upload ajax pictures based on firefox, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

There are many kinds of protocols for uploading picture files, this time mainly in the form of "Content-Type:multipart/form-data;".

At work, some static files in the foreground are referenced through the FTL template system, and the foreground pages are referenced through SSI. When the project is developed, a large number of static SHTML files need to be generated. Originally, I thought it should be a background thing, but since I joined this company, this fast thing has been given to the front end. I am speechless. I have no way to follow the habit. But I am a lazy person, so I wonder if I can submit it through ajax.

Based on the usual browsing of MDN, today is mainly the FormData object to solve the multi-file upload protocol.

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

Everything seems perfect, but in the File method, it only works at the chrome level. There is no way to upload pictures. Ordinary files can be realized through Blob objects.

Here are some ways to achieve this, a process of exploration.

1. After searching for a long time, the method of converting URL to File object 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, printing oFREvent.target.result just found _ "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."

It turned out to be base64-encoded data.

When I see the encoded data above, I wonder if the Blob object is 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.。 Thinking that base64 has been encoded, is it possible to decode it through the method?

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

Fd.append ('my-file', new Blob ([new Base64 (). Decode (' / 9j Universe 4AAQSkZJRgABAQESASABIAAD) 2wBDAAUDBAQEAwUEBAQFBQ.), {type: "image/jpeg"}))

Grab the packet and find that the normal transfer file is different from the ajax data, which must be a failure.

3. Browser page level for the sake of security, it seems that the operation of selecting files has to be done manually.

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

Fd.append ('my-file',document.querySelector (Selector). Files [0])

In fact, I was misled by File api at the beginning and always thought it was at the page level.

I suddenly found that this method was used at the top of the last address. no, no, no. It seems that I still don't take things seriously and take some detours.

The above is all the contents of the article "how to upload ajax pictures based on firefox". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.