Ajax image upload based on firefox

This article mainly introduces the implementation of ajax image upload based on firefox. Everyone knows that using ajax under FF is very difficult. Today I will introduce to you a perfect solution to this problem. Friends can refer to it.

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

At work, some static files in the frontend are referenced through the FTL template system, and the frontend page is referenced through SSI. During project development, a large number of static SHTML files need to be generated. I originally thought it should be a backend thing, but Ever since I joined this company, this fast thing has been handed over to the front end~~ I was speechless, I had no choice but to follow my habits, but I am a lazy person, so I just thought about whether I could submit it through ajax

Based on my usual reading of MDN, today it is mainly the FormData object that solves the protocol for uploading multiple files.

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

Everything seems to be perfect, but in the File method, only on the chrome level to run. There is no way to upload pictures. Generally, ordinary files can be implemented through Blob objects.

The following are some methods to achieve it, an exploration process

1. After looking for a long time, I found a method to convert URL to File object. , all failed. . .

2.HTML5 File direction

a. Let’s start with the example of HTML5 File

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

In the example, when printing oFREvent.target.result, only "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAUDBAQEAwUEBAQFBQ..."

is found. It turns out to be base64 encoded. Data

When I saw the encoded data above, I wondered if the Blob object was 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 thought that base64 had been encoded. Is it possible to decode it through the method?

I found an example of base64 encoding and decoding on the Internet, and used it

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

After capturing the packets, I found that the normal file transfer is different from the ajax data, so it must have failed

3. For the sake of security at the browser page level, it seems that the operation of selecting files must 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 the File api at the beginning. I always thought it was at the page level.

Suddenly I discovered that this method was used at the top of the last address. . It seems that I still didn’t look at things seriously and took some detours.

Postscript, by adding functions like the Oil Monkey plug-in and supporting the chrome-level File method, we can easily upload photos.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax loading external page pop-up layer effect implementation method

AJAX submission form data example analysis

Ajax cross-domain (same basic domain name) form submission method

The above is the detailed content of Ajax image upload based on firefox. For more information, please follow other related articles on the PHP Chinese website!