Formulir email dengan lampiran file dalam html

Question

Terima kasih telah berbagi kode yang bagus. Hanya sedikit modifikasi maka ini adalah kode yang berfungsi sebenarnya. MEMBUAT FILE HTML

Unggah File dan kirim sebagai lampiran email

Nama
Surel
Pilih File Untuk Diunggah

Folder yang sama membuat file php bernama mail_sender. php

 0)
            {
            echo "Return Code: " . $_FILES["uploaded_file"]["error"] . "
";
            }
          else
            {      
                sendMailAsAttachment($_FILES["uploaded_file"]["tmp_name"],$_FILES["uploaded_file"]["name"],$formData);         
            }
          }
        else
          {
          echo "Invalid file " . $extension . " {} " . $_FILES['uploaded_file']['type'];
          //echo in_array($_FILES['uploaded_file']['type'],$mimes );
          }  
    }



//This function accepts post data on form submissions and prepare the email message from the form data.

    function prepareEmail( $formData ) {

        // email fields: to, from, subject, and so on
        $to = "[email protected]";
        $from = "[email protected]"; 
        $subject =""; 
        $message = "Uploaded File\n";
        $message .= "Name :". $formData['name']."\n";
        $message .= "Email Address :". $formData['email']."\n";
        $headers = "From: $from";

        // boundary 
        $semi_rand = md5(time()); 
        $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x"; 

        // headers for attachment 
        $headers .= "\nMIME-Version: 1.0\n" . "Content-Type: multipart/mixed;\n" . " boundary=\"{$mime_boundary}\""; 

        // multipart boundary 
        $message .= "This is a multi-part message in MIME format.\n\n" . "--{$mime_boundary}\n" . "Content-Type: text/plain; charset=\"iso-8859-1\"\n" . "Content-Transfer-Encoding: 7bit\n\n" . $message . "\n\n"; 
        $message .= "--{$mime_boundary}\n";

        $emailData = array (
            'to' => $to,
            'from' => $from,
            'subject' => $subject,
            'headers' => $headers,
            'message' => $message
        );

        return $emailData;

    }

    function prepareAttachment( $filename ,$fileorgname) {
        $semi_rand = md5(time()); 
        $mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
        $attachContent = '';
        $file = fopen($filename,"rb");
        $data = fread($file,filesize($filename));
        fclose($file);
        $cvData = chunk_split(base64_encode($data));
        $attachContent .= "Content-Type: {\"application/octet-stream\"};\n" . " name=\"$fileorgname\"\n" . 
        "Content-Disposition: attachment;\n" . " filename=\"$fileorgname\"\n" . 
        "Content-Transfer-Encoding: base64\n\n" . $cvData . "\n\n";
        $attachContent .= "--{$mime_boundary}\n"; 
        return $attachContent;

    }

    function sendMailAsAttachment( $filename, $fileorgname, $formData ) {

        $emailData = prepareEmail( $formData );
        $attachContent = prepareAttachment( $filename,$fileorgname );
        $message = $emailData['message'].$attachContent;
        $ok = @mail($emailData['to'], $emailData['subject'], $message, $emailData['headers']); 
        if ($ok) { 
                echo "mail sent to " . $emailData['to'] . "!"; 
        } else { 
                echo "mail could not be sent!"; 
        } 
    }



?>

Dalam tutorial ini, kita akan membuat contoh aplikasi menggunakan Express. js untuk mengunggah file ke Amazon S3, lalu kita akan menyimpan kiriman kita ke MongoDB

Prasyarat untuk tutorial

Saya tidak ingin membahas beberapa hal yang akan memperumit tutorial ini, oleh karena itu saya menganggap Anda tahu caranya

Dapatkan kunci API Anda dari Amazon AWS
Buat keranjang di Amazon S3

Jika Anda tidak tahu bagaimana melakukannya, Anda dapat melihat postingan blog ini, cukup mudah diikuti

Langkah-langkah yang akan kita ikuti

Buat Formulir Kontak menggunakan HTML
Bootstrap dan Express. aplikasi js
Mengurai data formulir
Mengunggah file ke S3
Menyimpan data ke MongoDB

Mari buat formulir kontak sederhana menggunakan HTML

Hal utama saat membuat formulir unggahan adalah atribut yang Anda tentukan di

$ mkdir my-form my-form/views
$ cd my-form

6

Mari kita membuat bentuk sederhana

<form action="#" method="POST">
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

Kami telah membuat alat penghasil formulir gratis yang dapat Anda sesuaikan dan dapatkan kode HTML, pastikan Anda memeriksanya jika Anda memerlukan templat formulir

Di dunia perangkat lunak, sebagian besar opsi yang dapat dikonfigurasi memiliki nilai default yang akan berlaku kecuali Anda menimpanya, dan salah satunya untuk

$ mkdir my-form my-form/views
$ cd my-form

7 adalah

$ mkdir my-form my-form/views
$ cd my-form

8

Saat Anda membuat permintaan ke backend, Anda harus menyandikan data formulir, ada 3 opsi yang tersedia untuk

$ mkdir my-form my-form/views
$ cd my-form

8

```
$ npm init
```
0 (standar)
```
$ npm init
```
_1
```
$ npm init
```
_2

Melalui ;

Jenis konten "application/x-www-form-urlencoded" tidak efisien untuk mengirim data biner atau teks dalam jumlah besar yang berisi karakter non-ASCII
Jenis konten "multipart/form-data" harus digunakan untuk mengirimkan formulir yang berisi file, data non-ASCII, dan data biner

Juga kecuali Anda benar-benar tahu apa yang Anda lakukan, jangan pernah menggunakan

$ npm init

2 (. )

Jadi yang ingin kita lakukan adalah mengatur

$ mkdir my-form my-form/views
$ cd my-form

_8 menjadi

$ npm init

1

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

Sekarang kami memiliki formulir kontak sederhana yang siap mengirim data ke aplikasi ekspres kami yang akan kami kembangkan sekarang. Mari kita simpan ini ke suatu tempat untuk saat ini

Bootstrap dan Express. aplikasi js

Saya berasumsi bahwa Anda sudah menginstal Node. js
Mari buat dan direktori untuk aplikasi kita menggunakan terminal/bash

$ mkdir my-form my-form/views
$ cd my-form

buat direktori my-app dan views untuk menyimpan formulir kontak kita, lalu masuk ke direktori

Gunakan perintah

$ npm init

_6 untuk menginisialisasi proyek kita

$ npm init

_menginisialisasi proyek

Tekan saja

$ npm init

_7 untuk semuanya, dan instal express. js menggunakan

$ npm install express express-fileupload --save
$ npm install nodemon -g

install express. js dan simpan ke paket. json

Sekarang kami memiliki struktur direktori seperti ini

.
|____my-form
| |____package.json
| |____views

_direktori pohon proyek kami

Simpan formulir yang kita buat di awal di bawah folder views sebagai

$ npm init

8

.
|____my-form
| |____index.js
| |____package.json
| |____views
| | |____form.html

direktori pohon (lagi) dari proyek kami

Mari buat

$ npm init

9 kita

const express = require('express')
const app = express()
const fileUpload = require('express-fileupload')

app.use(fileUpload({
  // 50mb file limit
  limits: { fileSize: 50 * 1024 * 1024 },
  abortOnLimit: true
}));

app.get('/', (req, res) => {
  res.sendFile('views/form.html' , { root : __dirname});
})

// endpoint that will handle the form
app.post('/submit', (req, res) => {
  const {body, files} = req
  res.send({body, files})
})

const port = 3031

app.listen(port, () => {
  console.log(`Application is available at http://localhost:${port}`)
})

_indeks. js

Simpan, lalu buka

$ npm init

_8 dan arahkan formulir ke titik akhir

$ npm install express express-fileupload --save
$ npm install nodemon -g

1 yang baru saja kita buat dengan aplikasi ekspres

- <form action="#" method="POST" enctype="multipart/form-data">
+ <form action="/submit" method="POST" enctype="multipart/form-data">

_bentuk. html

Tidak punya banyak waktu untuk formulir?

Pengunggahan file bukanlah sesuatu yang dapat Anda capai secara instan, jadi jika Anda ingin mendapatkan solusi yang cepat dan sederhana, lihat entri blog kami yang lain

Cara membuat form upload file dengan formcarry

Salah satu hal yang paling memakan waktu tentang formulir pasti mengunggah file, kadang-kadang Anda mungkin memerlukan formulir HTML dengan fungsi unggah file, dalam panduan ini kita akan memulai dengan sesederhana mungkin daripada melompat ke teknik lanjutan Setelah Anda membaca ini

Blog FormcarryNusu Alabuga

cara membuat form upload file dengan formcarry

Sekarang mari tambahkan beberapa gaya

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: "Inter";
    }

    label, button {
      font-size: 16px;
      cursor: pointer;
    }

    input, textarea {
      border: 3px solid #eee;
      padding: .4em 1em;
      border-radius: 6px;
    }

    form {
      display: grid;
      grid-row-gap: 10px;
      justify-content: center;
    }

    button {
      margin-top: 10px;
      background: #133EF5;
      color: #fff;
      padding: 10px 0;
      border: 0;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <form action="/submit" method="POST" enctype="multipart/form-data">
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
  </form>
</body>
</html>

bentuk. html

Akhirnya lari

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

0

Kemudian kunjungi

$ npm install express express-fileupload --save
$ npm install nodemon -g

_2 dari browser Anda

membentuk. html

Isi formulir dengan data sampel dan file kemudian kirimkan
Anda akan melihat sesuatu seperti ini

maaf Peter, 404 tidak ditemukan 🥺

gunakan Ekstensi Chrome JSONView untuk menampilkan konten JSON seperti 👆

Bagus, sekarang kita siap melakukan sisanya, mari kita perjelas sesuatu sebelum melanjutkan

bagaimana data Anda ditransmisikan ke aplikasi backend

Seperti yang Anda lihat pada gambar di atas, apa pun yang Anda tentukan untuk

$ npm install express express-fileupload --save
$ npm install nodemon -g

3 akan hadir di backend dengan nilai yang sama, jadi jika Anda tidak memberi nama bidang Anda maka Anda tidak dapat menguraikannya
Ini adalah kesalahan umum jadi berhati-hatilah 🕵️

Mengonfigurasi AWS-SDK

Ayo instal

$ npm install express express-fileupload --save
$ npm install nodemon -g

_4

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

1

Kemudian impor dan gunakan kunci yang Anda peroleh dari AWS

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

2Ganti kunci akses, kunci rahasia, dan nama keranjang Anda

Mengunggah Berkas

Kami siap mengunggah sekarang, pertama mari ubah fungsi kami menjadi fungsi async

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

3indeks. js

Kemudian mari kita tambahkan kode yang mengelola unggahan

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

4Unggah file ke Amazon S3. indeks. js

Jadi apa yang terjadi di sana?

Kami merusak objek

$ npm install express express-fileupload --save
$ npm install nodemon -g

_5 yang menyimpan file, jadi

$ npm install express express-fileupload --save
$ npm install nodemon -g

6 setara dengan

$ npm install express express-fileupload --save
$ npm install nodemon -g

7
Mari kita ingat muatan uji kita

Segala sesuatu di bawah kunci

$ npm install express express-fileupload --save
$ npm install nodemon -g

_8 disediakan oleh modul express-fileupload, yang menangani file dan mengembalikannya dalam struktur yang bagus dan dapat digunakan

$ npm install express express-fileupload --save
$ npm install nodemon -g

9 dan

.
|____my-form
| |____package.json
| |____views

0 dapat menerima _

.
|____my-form
| |____package.json
| |____views

1. Sementara

.
|____my-form
| |____package.json
| |____views

_2 kami adalah

.
|____my-form
| |____package.json
| |____views

3 kami dapat langsung meneruskannya ke parameter

.
|____my-form
| |____package.json
| |____views

4

.
|____my-form
| |____package.json
| |____views

5 adalah singkatan dari Daftar Kontrol Akses, yang telah kami setel ke

.
|____my-form
| |____package.json
| |____views

6 untuk melihat file yang diunggah

.
|____my-form
| |____package.json
| |____views

_7 adalah nama file kita

Mari kita coba

Kunjungi

.
|____my-form
| |____package.json
| |____views

_8 dan isi kolomnya. Anda tidak perlu mengisi apa pun selain file karena kami belum melakukan apa pun dengannya

Setelah Anda mengklik tombol Kirim, Anda akan melihat sesuatu seperti ini

Berkas yang Diunggah

Kemudian periksa ember Anda dan Anda akan melihat file di dalam ember

Dasbor S3

Itu berhasil. Sekarang kami memiliki data formulir dan detail file yang diunggah, kami dapat menggunakan data ini untuk menyimpan ke database atau mengirim beberapa webhook

Mengganti nama file

Bukan pilihan bijak untuk menggunakan nama file asli, jika orang lain mengunggah file dengan nama yang sama, lebih baik menulis fungsi sederhana untuk menghasilkan nama acak

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

5generator nama acak

Bahkan bukan pilihan bijak untuk hanya bergantung pada string yang dihasilkan secara acak. lebih baik menambahkan sesuatu yang unik pada waktu itu, seperti waktu ⏱ itu sendiri menggunakan

.
|____my-form
| |____package.json
| |____views

9

________12______6itu akan menampilkan sesuatu seperti => cm0avQtXfOAo1PEdJxZZ-1602531725730. jpg

Menyimpan pesan ke MongoDB (Opsional)

Sekarang, karena kita memiliki file dan form pesan, kita dapat menyimpannya ke dalam database
Saya akan menggunakan MongoDB untuk tujuan ini. Saya berasumsi bahwa Anda memiliki pengaturan MongoDB yang berfungsi;

Saya akan menggunakan paket mongoose npm untuk melakukan operasi di dalam express. aplikasi js

Instal Mongoose

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

7Instal luwak menggunakan npm

Buat Database MongoDB

________12______8Buat database formulir kontak menggunakan Mongo CLI

Impor luwak

Tambahkan kode ini ke index. js

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

9indeks. js

Buat Model

Pertama mari kita buat sebuah direktori bernama model di bawah akar proyek kita, lalu buat

.
|____my-form
| |____index.js
| |____package.json
| |____views
| | |____form.html

0 ke dalamnya

$ mkdir my-form my-form/views
$ cd my-form

0membuat direktori model dan model/formulir. js

Buka

.
|____my-form
| |____index.js
| |____package.json
| |____views
| | |____form.html

_0 kosong menggunakan editor kode Anda, dan rekatkan ini

$ mkdir my-form my-form/views
$ cd my-form

1model formulir kami

Model pada dasarnya adalah Skema MongoDB pada steroid - Anda dapat melihatnya di sini untuk mempelajari lebih lanjut. Semua bidang yang saya tentukan adalah bidang yang kita miliki di

$ npm init

8 kita

Impor Model kami

Mari impor model kita ke

$ npm init

_9

$ mkdir my-form my-form/views
$ cd my-form

_2indeks. js

Menyimpan pesan formulir

Mari ubah rute utama kita untuk menyimpan kiriman

$ mkdir my-form my-form/views
$ cd my-form

3Menyimpan kiriman ke model formulir kami

Trik kecil

Sementara kunci dan nilainya sama, kita dapat mengonversi kode kita menjadi ini

$ mkdir my-form my-form/views
$ cd my-form

_4

Mari kita coba

Kunjungi

.
|____my-form
| |____index.js
| |____package.json
| |____views
| | |____form.html

_4 dan isi kolomnya

Klik Kirim, lalu

Itu dia. sekarang Anda memiliki bentuk yang berfungsi sempurna

Cara Alternatif dan Sederhana. Gunakan Formcarry

Tidak berarti semua proses itu memakan waktu, kami memiliki penawaran untuk Anda, jangan ragu untuk mencoba formcarry, alih-alih mengkodekan semuanya sendiri, Anda dapat memiliki formulir siap unggah file dalam waktu kurang dari satu menit hanya dengan mengubah tindakan formulir Anda

$ mkdir my-form my-form/views
$ cd my-form

_5

Membandingkan langkah-langkah di atas, formcarry adalah cara yang sangat cepat dan aman untuk mengumpulkan kiriman dengan lampiran file, gunakan di formulir kontak, formulir lamaran kerja, atau formulir acara sesuai kebutuhan Anda

Bagaimana Anda melampirkan file ke formulir di HTML?

The menentukan bidang pemilihan file dan tombol "Jelajahi" untuk mengunggah file. Untuk menentukan bidang pemilihan file yang memungkinkan banyak file dipilih, tambahkan beberapa atribut. Tip. Selalu tambahkan tag

Bagaimana cara mengirim data formulir HTML ke email dengan lampiran menggunakan PHP?

Ikuti langkah-langkah ini untuk mengirim pengiriman formulir HTML langsung ke alamat email. .

Buat formulir kontak menggunakan HTML dan CSS

Host formulir HTML di server hosting web langsung untuk menulis skrip PHP

Buka editor Kode VS Anda

Hubungkan editor Kode VS ke server web langsung menggunakan ekstensi SFTP

Ubah ekstensi file Anda dari

Bagaimana cara membuat formulir email berbasis PHP dengan lampiran file?

Periksa dan validasi ekstensi file untuk mengizinkan format file tertentu (file PDF, Gambar, dan MS Word). Unggah file ke server menggunakan fungsi PHP move_uploaded_file(). Tambahkan data formulir dan file yang diunggah ke konten email. Kirim email ke penerima yang ditentukan dengan lampiran menggunakan fungsi PHP mail()