Tanpa menggunakan apapun bentuk apapun, saya hanya dapat mengirim file/file dari <input type="file">
untuk 'tanggal.php' menggunakan metode POST menggunakan jQuery. Masukan tag ini tidak dalam bentuk tag. Ia berdiri secara individual. Jadi saya don't ingin menggunakan plugin jQuery seperti 'ajaxForm' atau 'ajaxSubmit'.
Anda dapat menggunakan FormData untuk mengirimkan data dengan permintaan POST. Berikut ini adalah contoh sederhana:
var myFormData = new FormData();
myFormData.append('pictureFile', pictureInput.files[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
processData: false, // important
contentType: false, // important
dataType : 'json',
data: myFormData
});
Anda don't harus menggunakan bentuk untuk membuat permintaan ajax, asalkan anda tahu permintaan anda pengaturan (seperti url, metode dan parameter data).
Semua jawaban di sini masih menggunakan FormData API. Hal ini seperti sebuah "multipart/form-data"
meng-upload tanpa bentuk. Anda juga dapat meng-upload file secara langsung sebagai konten di dalam tubuh permintaan POST
menggunakan xmlHttpRequest
seperti ini:
var xmlHttpRequest = new XMLHttpRequest();
var file = ...file handle...
var fileName = ...file name...
var target = ...target...
var mimeType = ...mime type...
xmlHttpRequest.open('POST', target, true);
xmlHttpRequest.setRequestHeader('Content-Type', mimeType);
xmlHttpRequest.setRequestHeader('Content-Disposition', 'attachment; filename="' + fileName + '"');
xmlHttpRequest.send(file);
Content-Type
dan Content-Disposition
header yang digunakan untuk menjelaskan apa yang kami mengirimkan (mime-type dan nama file).
Saya memposting jawaban serupa juga di sini.
Mendasarkan pada tutorial ini, berikut ini cara yang sangat dasar untuk melakukan itu:
$('your_trigger_element_selector').on('click', function(){
var data = new FormData();
data.append('input_file_name', $('your_file_input_selector').prop('files')[0]);
// append other variables to data if you want: data.append('field_name_x', field_value_x);
$.ajax({
type: 'POST',
processData: false, // important
contentType: false, // important
data: data,
url: your_ajax_path,
dataType : 'json',
// in PHP you can call and process file in the same way as if it was submitted from a form:
// $_FILES['input_file_name']
success: function(jsonData){
...
}
...
});
});
Don't lupa untuk menambahkan penanganan kesalahan yang tepat
Langkah 1: Membuat Halaman HTML di mana untuk menempatkan Kode HTML.
Langkah 2: Di Kode HTML Halaman Bawah(footer)Membuat Javascript: <script></script> dan letakkan Kode Jquery ke dalam tag Script.
Langkah 3: Buat File PHP, dan kode php copy lalu. setelah Kode Jquery di $.ajax
Kode url menerapkan yang satu pada file php anda nama.
JS
//$(document).on("change", "#avatar", function() { // If you want to upload without a submit button
$(document).on("click", "#upload", function() {
var file_data = $("#avatar").prop("files")[0]; // Getting the properties of file from file field
var form_data = new FormData(); // Creating object of FormData class
form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data
form_data.append("user_id", 123) // Adding extra parameters to form_data
$.ajax({
url: "/upload_avatar", // Upload Script
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: form_data, // Setting the data attribute of ajax with file_data
type: 'post',
success: function(data) {
// Do something after Ajax completes
}
});
});
HTML
<input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />
Php
print_r($_FILES);
print_r($_POST);
Maaf untuk menjadi pria tapi AngularJS menawarkan solusi sederhana dan elegan.
Berikut adalah kode yang saya gunakan:
ngApp.controller('ngController', ['$upload',
function($upload) {
$scope.Upload = function($files, index) {
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
$scope.upload = $upload.upload({
file: file,
url: '/File/Upload',
data: {
id: 1 //some data you want to send along with the file,
name: 'ABC' //some data you want to send along with the file,
},
}).progress(function(evt) {
}).success(function(data, status, headers, config) {
alert('Upload done');
}
})
.error(function(message) {
alert('Upload failed');
});
}
};
}]);
.Hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-controller="ngController">
<input type="button" value="Browse" onclick="$(this).next().click();" />
<input type="file" ng-file-select="Upload($files, 1)" class="Hidden" />
</div>
Pada sisi server saya memiliki sebuah MVC controller dengan tindakan menyimpan file upload ditemukan dalam Permintaan.Koleksi file dan kembali JsonResult.
Jika anda menggunakan AngularJS mencoba hal ini, jika anda don't... maaf sobat :-)
Coba ini puglin simpleUpload, tidak perlu membentuk
Html:
<input type="file" name="arquivo" id="simpleUpload" multiple >
<button type="button" id="enviar">Enviar</button>
Javascript:
$('#simpleUpload').simpleUpload({
url: 'upload.php',
trigger: '#enviar',
success: function(data){
alert('Envio com sucesso');
}
});