web-dev-qa-db-fra.com

Email HTML avec pièces jointes en ligne et pièces jointes non en ligne

Quelle est la bonne façon de créer un e-mail HTML avec des pièces jointes en ligne et des pièces jointes non en ligne?

De plus, veuillez me dire quel type de contenu utiliser avec uniquement des pièces jointes en ligne et uniquement avec des pièces jointes non en ligne.

Jusqu'à présent, je l'ai fait comme ceci:

MIME-Version: 1.0
[some more headers]
Content-type: multipart/mixed;
 boundary="myboundary"
--myboundary
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

[html with img cid:my_image]

--myboundary
Content-Type: image/png;  name="my_image.png"
Content-Transfer-Encoding: base64
Content-ID: <my_image>
Content-Disposition: inline;  filename="my_image.png"

[base64 image data]

--myboundary
Content-type: application/pdf;  name="my_pdf.pdf"
Content-length: 1150
Content-Transfer-Encoding: base64
Content-ID: <my_pdf.pdf>
Content-Disposition: attachment;  filename="my_pdf.pdf"

[base64 pdf data]

--myboundary--

Le courrier semble bon dans Outlook. Mais j'ai remarqué que Thunderbird n'affichait pas mon image en ligne et montrait à la place 2 pièces jointes (Mon image et mon PDF). J'ai donc fait un débogage et j'ai remarqué que les images en ligne devaient être envoyées via Content-Type: multipart/related.

J'ai donc changé Content-Type: multipart/mixed à Content-Type: multipart/related et Thunderbird l'a affiché correctement: l'image est affichée en html et une pièce jointe, le PDF est affiché.

Je ne suis pas sûr que ce soit la bonne solution même si cela semble fonctionner. Est-il correct d'utiliser multipart/related toujours (si j'ai des pièces jointes en ligne et non en ligne, si je n'ai que des pièces jointes en ligne et si je n'ai que des pièces jointes non en ligne)?

Ou est-ce la bonne façon d'utiliser une frontière de type liée à la division des pièces jointes en ligne et une autre frontière de type mixte pour fractionner les pièces jointes non en ligne?

J'espère que vous pourrez me fournir un échantillon pour

  1. Courriel avec pièces jointes en ligne uniquement
  2. Courriel avec pièces jointes non intégrées uniquement
  3. Courriel avec pièces jointes en ligne et non en ligne
17
steven

Images

Oui, c'est une approche correcte pour utiliser multipart/related type de contenu. Voici un exemple (veuillez noter les valeurs "Content-Type" et "Content-Disposition"):

enter image description here

Exemple de source et informations détaillées

Voici des exemples que vous avez demandés:

  1. Courriel avec pièces jointes en ligne uniquement
  2. Courriel avec pièces jointes non en ligne uniquement
  3. Courriel avec pièces jointes en ligne et non en ligne

Exemple 1: en ligne uniquement

enter image description here

Subject: Test 01: inline only
To: Renat Gilmanov
Content-Type: multipart/related; boundary=089e0149bb0ea4e55c051712afb5

--089e0149bb0ea4e55c051712afb5
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable

<div dir=3D"ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. P=
ellentesque odio urna, bibendum eu ultricies in, dignissim in magna. Vivamu=
s risus justo, viverra sed dapibus eu, laoreet eget erat. Sed pretium a urn=
a id pulvinar.<br><br><img src=3D"cid:ii_ia6yo3z92_14d962f8450cc6f1" height=
=3D"218" width=3D"320"><br>=E2=80=8B<br>Cras eu velit ac purus feugiat impe=
rdiet nec sit amet ipsum. Praesent gravida lobortis justo, nec tristique ve=
lit sagittis finibus. Suspendisse porta ante id diam varius, in cursus ante=
 luctus. Aenean a mollis mi. Pellentesque accumsan lacus sed erat vulputate=
, et semper tellus condimentum.<br><br>Best regards<br></div>

--089e0149bb0ea4e55c051712afb5
Content-Type: image/png; name="test-01.png"
Content-Disposition: inline; filename="test-01.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_ia6yo3z92_14d962f8450cc6f1>
X-Attachment-Id: ii_ia6yo3z92_14d962f8450cc6f1

iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB
...
QCDLAIEsAwSyDBDIMkAgywCBLAMEsgwQyDJAIMsAgSwDBLIMEMgyQCDLAIEsAwSyDBDIMkAg6wK+
4gU280YtuwAAAABJRU5ErkJggg==
--089e0149bb0ea4e55c051712afb5--

Exemple 2: uniquement les pièces jointes

enter image description here

Subject: Test 02: only attachments
To: Renat Gilmanov 
Content-Type: multipart/mixed; boundary=047d7b41cc5c82ae5d051712c40c

--047d7b41cc5c82ae5d051712c40c
Content-Type: text/plain; charset=UTF-8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
odio urna, bibendum eu ultricies in, dignissim in magna. Vivamus risus
justo, viverra sed dapibus eu, laoreet eget erat. Sed pretium a urna
id pulvinar.

Cras eu velit ac purus feugiat imperdiet nec sit amet ipsum. Praesent
gravida lobortis justo, nec tristique velit sagittis finibus.
Suspendisse porta ante id diam varius, in cursus ante luctus. Aenean a
mollis mi. Pellentesque accumsan lacus sed erat vulputate, et semper
tellus condimentum.

Best regards

--047d7b41cc5c82ae5d051712c40c
Content-Type: image/png; name="test-02.png"
Content-Disposition: attachment; filename="test-02.png"
Content-Transfer-Encoding: base64
X-Attachment-Id: f_ia6yvl4b0

iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB
...
gECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBA1gWV
ywTWDU1tpwAAAABJRU5ErkJggg==
--047d7b41cc5c82ae5d051712c40c--

Exemple 3: en ligne et pièces jointes

enter image description here

Subject: Test 03: inline and attachments
To: Renat Gilmanov
Content-Type: multipart/mixed; boundary=001a11c24d809f1525051712cc78

--001a11c24d809f1525051712cc78
Content-Type: multipart/related; boundary=001a11c24d809f1523051712cc77

--001a11c24d809f1523051712cc77
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable

<div dir=3D"ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. P=
ellentesque odio urna, bibendum eu ultricies in, dignissim in magna. Vivamu=
s risus justo, viverra sed dapibus eu, laoreet eget erat. Sed pretium a urn=
a id pulvinar.<br><br><img src=3D"cid:ii_ia6yyemg0_14d9636d8ac7a587" height=
=3D"218" width=3D"320"><br>=E2=80=8B<br>Cras eu velit ac purus feugiat impe=
rdiet nec sit amet ipsum. Praesent gravida lobortis justo, nec tristique ve=
lit sagittis finibus. Suspendisse porta ante id diam varius, in cursus ante=
 luctus. Aenean a mollis mi. Pellentesque accumsan lacus sed erat vulputate=
, et semper tellus condimentum.<br><br>Best regards</div>

--001a11c24d809f1523051712cc77
Content-Type: image/png; name="test-01.png"
Content-Disposition: inline; filename="test-01.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_ia6yyemg0_14d9636d8ac7a587>
X-Attachment-Id: ii_ia6yyemg0_14d9636d8ac7a587

iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB
...
QCDLAIEsAwSyDBDIMkAgywCBLAMEsgwQyDJAIMsAgSwDBLIMEMgyQCDLAIEsAwSyDBDIMkAg6wK+
4gU280YtuwAAAABJRU5ErkJggg==
--001a11c24d809f1523051712cc77--
--001a11c24d809f1525051712cc78
Content-Type: image/png; name="test-02.png"
Content-Disposition: attachment; filename="test-02.png"
Content-Transfer-Encoding: base64
X-Attachment-Id: f_ia6yymei1

iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB
...
gECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBA1gWV
ywTWDU1tpwAAAABJRU5ErkJggg==
--001a11c24d809f1525051712cc78--

Résumé rapide

  1. Pièces jointes en ligne uniquement: utilisez multipart/related
  2. Pièces jointes non en ligne uniquement: utilisez multipart/mixed
  3. Les pièces jointes en ligne et non en ligne utilisent multipart/mixed et multipart/related

Mise à jour

Voici un article très intéressant: tilisation d'images dans des e-mails HTML

29
Renat Gilmanov