
Resources/dropzone.css' type='text/css' rel='stylesheet'> Use Dropzone.options to allow only image files and set the max file size to 1 MB. When a page is run this will add a container for upload files by drag & drop. Just need to create a " class= "dropzone" id="fileupload">.
Include dropzone.js and dropzone.css in section. Download Dropzone from here and create a resources directory at project root to store dropzone.js and dropzone.css files. $config = $_FILES Ĭreate a new user_view.php file in application/views/ directory. Here, set the upload preference – upload path, allowed type, max file size, and file name. fileUpload() – This method is called when a file is a drag and drop on the dropzone container to upload a file. $route = 'User' Ĭreate a new User.php file in application/controllers/ folder and also create a uploads folder at project root to store files. $("#uploadimage").Open application/config/routes.php and edit default_controller value to User. Move_uploaded_file($sourcePath,$targetPath) // Moving Uploaded file $targetPath = "upload/".$_FILES // Target path where file is to be stored $sourcePath = $_FILES // Storing source path of the file in a variable Success: function(data) // A function to be called if request succeeds ProcessData:false, // To send DOMDocument or non processed data file it is set to false form fields and values)ĬontentType: false, // The content type used when sending data to the server.Ĭache: false, // To unable request pages to be cached Type: "POST", // Type of request to be send, called as methodĭata: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. Url: "ajax_php_file.php", // Url to which the request is send Upload file ukuran yang diizinkan adalah 100 Kb.
Script PHP menyimpan gambar di lokasi yang ditentukan dan menginformasikan pesan proses berhasil ataupun gagal menyimpan.ĭi sini kita akan menerapkan beberapa validasi pada file yang dipilih, untuk memeriksa apakah file gambar (jpg, jpeg atau png) atau jenis file lainnya. Kemudian menggunakan jQuery Ajax, untuk mengirimkan script php pada tombol submit secara bersamaan.
Dalam proses ini gambar yang dipilih akan menyimpannya ke folder direktori atau lokasi yang ditentukan. Dalam postingan kali ini kita akan membahas cara meng-upload gambar menggunakan Ajax dan php tanpa refresh halaman.