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
NamaSurel
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 = "solimankhulna@gmail.com"; $from = "solimankhulna@solimankhulna.com"; $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-form6
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-form7 adalah $ mkdir my-form my-form/views $ cd my-form8
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-form8
- $ npm init0 (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 init2 (. )
Jadi yang ingin kita lakukan adalah mengatur $ mkdir my-form my-form/views $ cd my-form_8 menjadi $ npm init1
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
Gunakan perintah $ npm init_6 untuk menginisialisasi proyek kita
$ npm init_menginisialisasi proyekTekan saja $ npm init_7 untuk semuanya, dan instal express. js menggunakan
$ npm install express express-fileupload --save $ npm install nodemon -ginstall express. js dan simpan ke paket. jsonSekarang kami memiliki struktur direktori seperti ini
. |____my-form | |____package.json | |____views _direktori pohon proyek kamiSimpan formulir yang kita buat di awal di bawah folder views sebagai $ npm init8
. |____my-form | |____index.js | |____package.json | |____views | | |____form.htmldirektori pohon (lagi) dari proyek kamiMari buat $ npm init9 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 //localhost:${port}`) })_indeks. jsSimpan, lalu buka $ npm init_8 dan arahkan formulir ke titik akhir $ npm install express express-fileupload --save $ npm install nodemon -g1 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. htmlTidak 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
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>0Kemudian kunjungi $ npm install express express-fileupload --save $ npm install nodemon -g_2 dari browser Anda
Isi formulir dengan data sampel dan file kemudian kirimkan
Anda akan melihat sesuatu seperti ini
gunakan Ekstensi Chrome JSONView untuk menampilkan konten JSON seperti 👆
Bagus, sekarang kita siap melakukan sisanya, mari kita perjelas sesuatu sebelum melanjutkan
Seperti yang Anda lihat pada gambar di atas, apa pun yang Anda tentukan untuk $ npm install express express-fileupload --save
$ npm install nodemon -g3 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>1Kemudian 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 AndaMengunggah 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. jsKemudian 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. jsJadi 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 -g6 setara dengan $ npm install express express-fileupload --save
$ npm install nodemon -g7
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 -g9 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
Kemudian periksa ember Anda dan Anda akan melihat file di dalam ember
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
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. jpgMenyimpan 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 npmBuat Database MongoDB
________12______8Buat database formulir kontak menggunakan Mongo CLIImpor 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. jsBuat Model
Pertama mari kita buat sebuah direktori bernama model di bawah akar proyek kita, lalu buat . |____my-form | |____index.js | |____package.json | |____views | | |____form.html0 ke dalamnya
$ mkdir my-form my-form/views $ cd my-form0membuat direktori model dan model/formulir. jsBuka . |____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-form1model formulir kamiModel 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 init8 kita
Impor Model kami
Mari impor model kita ke $ npm init_9
$ mkdir my-form my-form/views $ cd my-form_2indeks. jsMenyimpan pesan formulir
Mari ubah rute utama kita untuk menyimpan kiriman
$ mkdir my-form my-form/views $ cd my-form3Menyimpan kiriman ke model formulir kamiTrik kecil
Sementara kunci dan nilainya sama, kita dapat mengonversi kode kita menjadi ini
$ mkdir my-form my-form/views $ cd my-form_4Mari 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_5Membandingkan 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