Unggah File jQuery Ajax

755

Bisakah saya menggunakan kode jQuery berikut untuk melakukan unggah file menggunakan metode POST dari permintaan ajax?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Jika mungkin, apakah saya perlu mengisi data bagian? Apakah ini cara yang benar? Saya hanya POST file ke sisi server.

Saya telah googling di sekitar, tetapi apa yang saya temukan adalah sebuah plugin sementara dalam rencana saya, saya tidak ingin menggunakannya. Setidaknya untuk saat ini.

Willy
sumber
Ajax tidak mendukung unggahan file, Anda harus menggunakan iframe sebagai gantinya
antyrat
1
Pertanyaan terkait: stackoverflow.com/questions/6974684/…
Nathan Koop
2
Terkait: stackoverflow.com/questions/166221/…
Timo Huovinen

Jawaban:

596

Unggahan file tidak dimungkinkan melalui AJAX.
Anda dapat mengunggah file, tanpa menyegarkan halaman dengan menggunakan IFrame.
Anda dapat memeriksa detail lebih lanjut di sini .


MEMPERBARUI

Dengan XHR2, Unggah file melalui AJAX didukung. Misalnya melalui FormDataobjek, tetapi sayangnya itu tidak didukung oleh semua / browser lama.

FormData dukungan dimulai dari versi browser desktop berikut.

  • IE 10+
  • Firefox 4.0+
  • Chrome 7+
  • Safari 5+
  • Opera 12+

Untuk detail lebih lanjut, lihat tautan MDN .

Adeel
sumber
41
Berikut adalah daftar browser tertentu yang tidak didukung: caniuse.com/#search=FormData Juga saya belum menguji ini tetapi di sini ada polyfill untuk FormData gist.github.com/3120320
Ryan White
152
Secara khusus, IE <10 tidak, bagi mereka yang malas membaca tautan.
Kevin
22
@Synex tidak, kami tidak perlu menunggu selama itu lagi karena semua IE hanya memiliki 22% pangsa pasar di seluruh dunia dan 27% di AS dan turun dengan cepat. Kemungkinannya adalah orang berusia di atas 70 tahun. Jadi ketimbang IE yang menentukan apa yang harus dilakukan pengembang, IE harus membentuk atau keluar dari perlombaan.
Drew Calder
30
@DrewCalder Sebagian besar pengguna IE adalah pekerja kantor yang tidak memiliki pilihan browser mana yang akan digunakan karena kebijakan perusahaan. Saya pikir usia tidak ada hubungannya dengan itu. Saya kira kebanyakan orang> 70 mendapatkan keturunan mereka untuk menginstal Chrome atau FF sebagai gantinya :)
Nicolas Connault
3
Tautan ini benar-benar membantu saya dalam memahami hal yang seminimal mungkin. Saya tidak harus menggunakan permintaan xhr. Jika Anda menggunakan ajax pastikan untuk mengatur enctypeke "form/multipart"!
Luminous
316

Iframes tidak lagi diperlukan untuk mengunggah file melalui ajax. Saya baru-baru ini melakukannya sendiri. Lihatlah halaman-halaman ini:

Menggunakan unggahan file HTML5 dengan AJAX dan jQuery

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

Memperbarui jawabannya dan membersihkannya. Gunakan fungsi getSize untuk memeriksa ukuran atau gunakan fungsi getType untuk memeriksa jenis. Menambahkan kode html dan css progressbar.

var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

Cara menggunakan kelas Unggah

//Change id to your id
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload();
});

Kode html Progressbar

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

Kode css Progressbar

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}
Ziinloader
sumber
3
Anda dapat menyalin kode secara langsung dan menggunakannya. Cukup ganti beberapa nama id dan nama kelas. Kustomisasi apa pun ada pada Anda sendiri.
Ziinloader
4
Perhatikan bahwa myXhr tampaknya bersifat global serta nama, ukuran, dan jenis. Juga lebih baik menggunakan "beforeSend" untuk menambah objek XMLHttpRequest yang sudah dibuat daripada menggunakan "xhr" untuk membuat satu lalu mengubahnya.
awatts
8
Saya tidak berpikir kita bisa menggunakannya seperti @Ziinloader. Anda menggunakan beberapa metode lokal yang tidak termasuk: writer(catchFile). Apa writer()?
tandrewnichols
4
Bagaimana jika data juga berisi beberapa bidang beserta file yang akan diunggah?
raju
2
@Ziloader Ini adalah contoh yang sangat berguna yang saya lihat Anda telah kembali dan mempertahankan beberapa kali. Benar-benar jawaban yang nilainya jauh lebih tinggi daripada jawaban yang saya berikan.
Reguler Joe
191

Posting ajax dan mengunggah file dimungkinkan. Saya menggunakan jQuery $.ajaxfungsi untuk memuat file saya. Saya mencoba menggunakan objek XHR tetapi tidak bisa mendapatkan hasil di sisi server dengan PHP.

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);

$.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
           console.log(data);
           alert(data);
       }
});

Seperti yang Anda lihat, Anda harus membuat objek FormData, kosong atau dari (serial? - $('#yourForm').serialize())formulir yang ada, dan kemudian lampirkan file input.

Berikut ini informasi lebih lanjut: - Cara mengunggah file menggunakan jQuery.ajax dan FormData - Mengunggah file melalui jQuery, objek FormData disediakan dan tidak ada nama file, DAPATKAN permintaan

Untuk proses PHP Anda dapat menggunakan sesuatu seperti ini:

//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:   
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_FORM_SIZE:  
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_PARTIAL:    
          $message = 'Error: no terminó la acción de subir el archivo.';
          break;
     case UPLOAD_ERR_NO_FILE:    
          $message = 'Error: ningún archivo fue subido.';
          break;
     case UPLOAD_ERR_NO_TMP_DIR: 
          $message = 'Error: servidor no configurado para carga de archivos.';
          break;
     case UPLOAD_ERR_CANT_WRITE: 
          $message= 'Error: posible falla al grabar el archivo.';
          break;
     case  UPLOAD_ERR_EXTENSION: 
          $message = 'Error: carga de archivo no completada.';
          break;
     default: $message = 'Error: carga de archivo no completada.';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}
pedrozopayares
sumber
2
Pustaka jquery apa yang saya perlukan untuk referensi untuk menjalankan kode ini?
Rayden Black
Jawabannya ditulis pada tahun 2014. Versi JQuery adalah 1,10. Saya belum mencoba dengan versi yang lebih baru.
pedrozopayares
5
formData.append('file', $('#file')[0].files[0]);kembali undefineddan console.log(formData) tidak memiliki apa-apa kecuali_proto_
Yakob Ubaidi
1
Tidak didukung oleh IE 9, kalau-kalau ada yang terjebak di neraka yang sama seperti saya
CountMurphy
3
Saya dapat ini berfungsi ... Cubit saya, saya di surga unggah file jQuery Ajax! var formData = new FormData(); formData.append('file', document.getElementById('file').files[0]); $.ajax({ url : $("form[name='uploadPhoto']").attr("action"), type : 'POST', data : formData, processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success : function(data) { console.log(data); alert(data); } });
TARKUS
104

Formulir Unggah Sederhana

 <script>
   //form Submit
   $("form").submit(function(evt){	 
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'fileUpload',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
 });
</script>
<!--Upload Form-->
<form>
  <table>
    <tr>
      <td colspan="2">File Upload</td>
    </tr>
    <tr>
      <th>Select File </th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="submit"/> 
      </td>
    </tr>
  </table>
</form>

vickisys
sumber
Pak apa js yang digunakan pada contoh ini apakah ada plugin jquery khusus untuk yang satu ini..saya punya pertanyaan saya menunjuk di sini dapatkah Anda memeriksa pertanyaan saya .. Saya ingin mengunggah beberapa file atau gambar dalam proyek itu di sini adalah tautan stackoverflow.com/questions/28644200/…
Brownman Revival
19
$ (ini) [0] apakah ini
machineaddict
2
Apa parameter di server untuk file yang diposting? Tolong posting bagian server.
FrenkyB
@FrenkyB dan lain-lain - file di server (dalam PHP) tidak disimpan dalam variabel $ _POST - disimpan dalam variabel $ _FILES. Dalam hal ini, Anda akan mengaksesnya dengan $ _FILES ["csv"] karena "csv" adalah atribut nama dari tag input.
dev_masta
68

Saya sangat terlambat untuk ini tetapi saya sedang mencari solusi pengunggahan gambar berbasis ajax dan jawaban yang saya cari agak tersebar di seluruh posting ini. Solusi yang saya setujui melibatkan objek FormData. Saya mengumpulkan bentuk dasar dari kode yang saya kumpulkan. Anda dapat melihatnya mendemonstrasikan cara menambahkan bidang khusus ke formulir dengan fd.append () serta cara menangani data respons saat permintaan ajax selesai.

Unggah html:

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

Jika Anda bekerja dengan php, inilah cara untuk menangani unggahan yang mencakup penggunaan kedua bidang khusus yang ditunjukkan dalam html di atas.

Upload.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>
le8oi
sumber
saya Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,mengerti mengapa ini jadi pak saya salin tempel kode Anda apa adanya
Brownman Revival
2
@HogRider - jika Anda Google pesan kesalahan Anda, ini adalah hasil pertama: stackoverflow.com/questions/10752055/... Apakah Anda mengakses halaman web Anda secara lokal melalui file://, daripada menggunakan server web? Selain itu, bukan praktik terbaik untuk menyalin dan menempel kode secara membabi buta tanpa terlebih dahulu memahaminya. Saya akan merekomendasikan Anda melalui kode baris demi baris untuk mendapatkan pemahaman tentang apa yang terjadi sebelum menempatkan kode untuk digunakan.
colincameron
@ colincameron terima kasih telah menjelaskan beberapa hal yang saya lakukan melalui baris demi baris dan saya tidak terlalu mengerti sehingga saya mengajukan pertanyaan sehingga seseorang dapat mengklarifikasi keraguan saya. Saya menggunakan xampp dengan cara lokal tepatnya. Bisakah saya mengajukan pertanyaan yang mungkin bisa Anda klarifikasi?
Brownman Revival
@ Brown Revival: Saya tahu bahwa sudah terlambat untuk membalas .. Anda mendapat kesalahan asal silang karena Anda membuka file html sebagai file daripada menjalankannya dari server.
Adarsh ​​Mohan
@AdarshMohan saya menghargai balasan bagaimana Anda menyarankan saya melakukannya untuk memperbaikinya?
Brownman Revival
31

Upload AJAX memang memungkinkan dengan XMLHttpRequest(). Tidak perlu iframe. Kemajuan unggahan dapat ditampilkan.

Untuk perinciannya lihat: Jawab https://stackoverflow.com/a/4943774/873282 untuk menanyakan jQuery Upload Progress dan unggahan file AJAX .

koppor
sumber
24
Sayangnya IE <10 tidak mendukung ini.
Sasha Chedygov
1
Ketika Anda hanya ingin merujuk ke halaman lain sebagai jawaban, Anda dapat memilih untuk menutup sebagai dupkucate atau meninggalkan komentar di bawah pertanyaan. Posting ini Bukan Jawaban. Pos semacam ini terlihat seperti upaya untuk bertani perwakilan.
mickmackusa
18

Begini cara saya membuatnya berfungsi:

HTML

<input type="file" id="file">
<button id='process-file-button'>Process</button>

JS

$('#process-file-button').on('click', function (e) {
    let files = new FormData(), // you can consider this as 'data bag'
        url = 'yourUrl';

    files.append('fileName', $('#file')[0].files[0]); // append selected file to the bag named 'file'

    $.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log(err);
        }
    });
});

PHP

if (isset($_FILES) && !empty($_FILES)) {
    $file = $_FILES['fileName'];
    $name = $file['name'];
    $path = $file['tmp_name'];


    // process your file

}
М.Б.
sumber
2
Apa yang paling membantu saya tentang ini adalah $('#file')[0].files[0]yang merupakan semacam solusi JS aneh tanpa memerlukan yang tepat<form>
ffgpga08
Ini adalah solusi lengkap, bit PHP juga membantu.
cdsaenz
14

Jika Anda ingin melakukannya seperti itu:

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function() {
    console.log( 'Finished upload');                    
});

dari

https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/src/jquery.upload.js

mungkin solusi Anda.

Lgersman
sumber
Di mana metode pengunggahan dalam $ object, tautan di atas tidak ada
keren
2
Terima kasih telah mengirim jawaban Anda! Pastikan untuk membaca FAQ tentang Promosi Diri dengan cermat. Juga mencatat bahwa itu diperlukan bahwa Anda memasukkan disclaimer setiap kali Anda link ke situs Anda sendiri / produk.
Andrew Barber
13
  • Gunakan iframe tersembunyi dan tetapkan target formulir Anda ke nama iframe itu. Dengan cara ini, ketika formulir dikirimkan, hanya iframe yang akan di-refresh.
  • Suruh pengendali acara terdaftar untuk acara buka iframe untuk menguraikan respons.

Lebih detail di posting blog saya: http://blog.manki.in/2011/08/ajax-fie-upload.html .

Manki
sumber
Hindari iframe jika memungkinkan
Bhargav Nanekalva
@BhargavNanekalva apa yang menjadi perhatian Anda?
aswzen
13
$("#submit_car").click( function() {
  var formData = new FormData($('#car_cost_form')[0]);
$.ajax({
       url: 'car_costs.php',
       data: formData,
       async: false,
       contentType: false,
       processData: false,
       cache: false,
       type: 'POST',
       success: function(data)
       {
       },
     })    return false;    
});

sunting: Catat jenis data dan proseskan data Anda dapat menggunakan ini untuk mengunggah file melalui Ajax ...... kirim masukan tidak boleh di luar elemen bentuk :)

Gvice
sumber
3
Dengan menggunakan metode ini, Anda dapat memposting formulir tetapi tidak dengan bidang tipe 'file'. Pertanyaan ini khusus tentang pengunggahan file.
Jomy John
11

Pembaruan 2019:

html

<form class="fr" method='POST' enctype="multipart/form-data"> {% csrf_token %}
<textarea name='text'>
<input name='example_image'>
<button type="submit">
</form>

js

$(document).on('submit', '.fr', function(){

    $.ajax({ 
        type: 'post', 
        url: url, <--- you insert proper URL path to call your views.py function here.
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        data: new FormData(this) ,
        success: function(data) {
             console.log(data);
        }
        });
        return false;

    });

views.py

form = ThisForm(request.POST, request.FILES)

if form.is_valid():
    text = form.cleaned_data.get("text")
    example_image = request.FILES['example_image']
Jay
sumber
1
Bagaimana cara meningkatkan jawaban yang sudah diberikan? Juga jawaban ini menyebutkan file views.py yang merupakan Django dan tidak ada hubungannya dengan pertanyaan.
dirkgroten
6
Karena masalah memanifestasikan dirinya sebanding saat menggunakan Django, dan jika Anda menggunakan Django, tidak ada banyak arah di sini dalam hal menyelesaikannya. Saya pikir saya akan menawarkan bantuan pro-aktif kalau-kalau ada yang datang ke sini seperti yang saya lakukan di masa depan. Mengalami hari yang sulit?
Jay
9

Gunakan FormData. Ini bekerja dengan sangat baik :-) ...

var jform = new FormData();
jform.append('user',$('#user').val());
jform.append('image',$('#image').get(0).files[0]); // Here's the important bit

$.ajax({
    url: '/your-form-processing-page-url-here',
    type: 'POST',
    data: jform,
    dataType: 'json',
    mimeType: 'multipart/form-data', // this too
    contentType: false,
    cache: false,
    processData: false,
    success: function(data, status, jqXHR){
        alert('Hooray! All is well.');
        console.log(data);
        console.log(status);
        console.log(jqXHR);

    },
    error: function(jqXHR,status,error){
        // Hopefully we should never reach here
        console.log(jqXHR);
        console.log(status);
        console.log(error);
    }
});
delboy1978uk
sumber
inilah yang: ('pengguna', $ ('# pengguna'). val ());
rahim.nagori
textbox dengan id = "user" ditambahkan ke form @ rahim.nagori
Alp Altunel
1
Pendekatan yang lebih langsung: var jform = new FormData ($ ('form'). Get (0));
André Morales
bagus, terima kasih, akan mencobanya lain kali saya menggunakan FormData
delboy1978uk
7

Saya telah menerapkan beberapa file pilih dengan pratinjau instan dan unggah setelah menghapus file yang tidak diinginkan dari pratinjau melalui ajax.

Dokumentasi terperinci dapat ditemukan di sini: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html

Demo: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/

jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/

Javascript:

    $(document).ready(function(){
    $('form').submit(function(ev){
        $('.overlay').show();
        $(window).scrollTop(0);
        return upload_images_selected(ev, ev.target);
    })
})
function add_new_file_uploader(addBtn) {
    var currentRow = $(addBtn).parent().parent();
    var newRow = $(currentRow).clone();
    $(newRow).find('.previewImage, .imagePreviewTable').hide();
    $(newRow).find('.removeButton').show();
    $(newRow).find('table.imagePreviewTable').find('tr').remove();
    $(newRow).find('input.multipleImageFileInput').val('');
    $(addBtn).parent().parent().parent().append(newRow);
}

function remove_file_uploader(removeBtn) {
    $(removeBtn).parent().parent().remove();
}

function show_image_preview(file_selector) {
    //files selected using current file selector
    var files = file_selector.files;
    //Container of image previews
    var imageContainer = $(file_selector).next('table.imagePreviewTable');
    //Number of images selected
    var number_of_images = files.length;
    //Build image preview row
    var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' +
        '<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' +
        '</tr> ');
    //Add image preview row
    $(imageContainer).html(imagePreviewRow);
    if (number_of_images > 1) {
        for (var i =1; i<number_of_images; i++) {
            /**
             *Generate class name of the respective image container appending index of selected images, 
             *sothat we can match images selected and the one which is previewed
             */
            var newImagePreviewRow = $(imagePreviewRow).clone().removeClass('imagePreviewRow_0').addClass('imagePreviewRow_'+i);
            $(newImagePreviewRow).find('input[type="button"]').attr('imageIndex', i);
            $(imageContainer).append(newImagePreviewRow);
        }
    }
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        /**
         * Allow only images
         */
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
          continue;
        }

        /**
         * Create an image dom object dynamically
         */
        var img = document.createElement("img");

        /**
         * Get preview area of the image
         */
        var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first');

        /**
         * Append preview of selected image to the corresponding container
         */
        preview.append(img); 

        /**
         * Set style of appended preview(Can be done via css also)
         */
        preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'});

        /**
         * Initialize file reader
         */
        var reader = new FileReader();
        /**
         * Onload event of file reader assign target image to the preview
         */
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
        /**
         * Initiate read
         */
        reader.readAsDataURL(file);
    }
    /**
     * Show preview
     */
    $(imageContainer).show();
}

function remove_selected_image(close_button)
{
    /**
     * Remove this image from preview
     */
    var imageIndex = $(close_button).attr('imageindex');
    $(close_button).parents('.imagePreviewRow_' + imageIndex).remove();
}

function upload_images_selected(event, formObj)
{
    event.preventDefault();
    //Get number of images
    var imageCount = $('.previewImage').length;
    //Get all multi select inputs
    var fileInputs = document.querySelectorAll('.multipleImageFileInput');
    //Url where the image is to be uploaded
    var url= "/upload-directory/";
    //Get number of inputs
    var number_of_inputs = $(fileInputs).length; 
    var inputCount = 0;

    //Iterate through each file selector input
    $(fileInputs).each(function(index, input){

        fileList = input.files;
        // Create a new FormData object.
        var formData = new FormData();
        //Extra parameters can be added to the form data object
        formData.append('bulk_upload', '1');
        formData.append('username', $('input[name="username"]').val());
        //Iterate throug each images selected by each file selector and find if the image is present in the preview
        for (var i = 0; i < fileList.length; i++) {
            if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) {
                var file = fileList[i];
                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }
                // Add the file to the request.
                formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name);
            }
        }
        // Set up the request.
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                var jsonResponse = JSON.parse(xhr.responseText);
                if (jsonResponse.status == 1) {
                    $(jsonResponse.file_info).each(function(){
                        //Iterate through response and find data corresponding to each file uploaded
                        var uploaded_file_name = this.original;
                        var saved_file_name = this.target;
                        var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />';
                        file_info_container.append(file_name_input);

                        imageCount--;
                    })
                    //Decrement count of inputs to find all images selected by all multi select are uploaded
                    number_of_inputs--;
                    if(number_of_inputs == 0) {
                        //All images selected by each file selector is uploaded
                        //Do necessary acteion post upload
                        $('.overlay').hide();
                    }
                } else {
                    if (typeof jsonResponse.error_field_name != 'undefined') {
                        //Do appropriate error action
                    } else {
                        alert(jsonResponse.message);
                    }
                    $('.overlay').hide();
                    event.preventDefault();
                    return false;
                }
            } else {
                /*alert('Something went wrong!');*/
                $('.overlay').hide();
                event.preventDefault();
            }
        };
        xhr.send(formData);
    })

    return false;
}
Ima
sumber
@Bhargav: Silakan lihat posting blog untuk penjelasan: goo.gl/umgFFy . Jika Anda masih memiliki pertanyaan, kembalilah ke saya Terima kasih
Ima
7

Saya telah menangani ini dalam kode sederhana. Anda dapat mengunduh demo yang berfungsi dari sini

Untuk kasus Anda, ini sangat mungkin. Saya akan membawa Anda langkah demi langkah bagaimana Anda dapat mengunggah file ke server menggunakan jquery AJAX.

Pertama mari kita buat file HTML untuk menambahkan elemen file form berikut seperti yang ditunjukkan di bawah ini.

<form action="" id="formContent" method="post" enctype="multipart/form-data" >
         <input  type="file" name="file"  required id="upload">
         <button class="submitI" >Upload Image</button> 
</form>

Kedua, buat file jquery.js dan tambahkan kode berikut untuk menangani pengiriman file kami ke server

    $("#formContent").submit(function(e){
        e.preventDefault();

    var formdata = new FormData(this);

        $.ajax({
            url: "ajax_upload_image.php",
            type: "POST",
            data: formdata,
            mimeTypes:"multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function(){
                alert("file successfully submitted");
            },error: function(){
                alert("okey");
            }
         });
      });
    });

Itu sudah selesai. Lihat lebih banyak

Daniel Nyamasyo
sumber
7

Menggunakan FormData adalah cara untuk pergi seperti yang ditunjukkan oleh banyak jawaban. di sini ada sedikit kode yang berfungsi bagus untuk tujuan ini. Saya juga setuju dengan komentar blok ajax bersarang untuk menyelesaikan keadaan kompleks. Dengan menyertakan e.PreventDefault (); dalam pengalaman saya membuat kode lebih lintas browser yang kompatibel.

    $('#UploadB1').click(function(e){        
    e.preventDefault();

    if (!fileupload.valid()) {
        return false;            
    }

    var myformData = new FormData();        
    myformData.append('file', $('#uploadFile')[0].files[0]);

    $("#UpdateMessage5").html("Uploading file ....");
    $("#UpdateMessage5").css("background","url(../include/images/loaderIcon.gif) no-repeat right");

    myformData.append('mode', 'fileUpload');
    myformData.append('myid', $('#myid').val());
    myformData.append('type', $('#fileType').val());
    //formData.append('myfile', file, file.name); 

    $.ajax({
        url: 'include/fetch.php',
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        data: myformData,
        enctype: 'multipart/form-data',
        success: function(response){
            $("#UpdateMessage5").html(response); //.delay(2000).hide(1); 
            $("#UpdateMessage5").css("background","");

            console.log("file successfully submitted");
        },error: function(){
            console.log("not okay");
        }
    });
});
Mike Volmar
sumber
ini menjalankan formulir melalui jquery memvalidasi ... if (! fileupload.valid ()) {return false; }
Mike Volmar
7

Menggunakan js murni lebih mudah

async function saveFile(inp) 
{
    let formData = new FormData();           
    formData.append("file", inp.files[0]);
    await fetch('/upload/somedata', {method: "POST", body: formData});    
    alert('success');
}
<input type="file" onchange="saveFile(this)" >

  • Di sisi server Anda dapat membaca nama file asli (dan info lainnya) yang secara otomatis disertakan untuk diminta.
  • Anda TIDAK perlu mengatur header "Tipe Konten" ke browser "multipart / form-data" yang akan mengaturnya secara otomatis
  • Solusi ini harus bekerja pada semua browser utama.

Di sini cuplikan lebih dikembangkan dengan penanganan kesalahan dan pengiriman json tambahan

Kamil Kiełczewski
sumber
6

Ya Anda bisa, cukup gunakan javascript untuk mendapatkan file, pastikan Anda membaca file sebagai URL data. Susun hal-hal sebelum base64 untuk benar-benar mendapatkan basis data disandikan base 64 dan kemudian jika Anda menggunakan php atau bahasa back end apa pun Anda bisa mendekode data base 64 dan menyimpannya ke dalam file seperti ditunjukkan di bawah ini

Javascript:
var reader = new FileReader();
reader.onloadend = function ()
{
  dataToBeSent = reader.result.split("base64,")[1];
  $.post(url, {data:dataToBeSent});
}
reader.readAsDataURL(this.files[0]);


PHP:
    file_put_contents('my.pdf', base64_decode($_POST["data"]));

Tentu saja Anda mungkin ingin melakukan validasi seperti memeriksa jenis file yang Anda hadapi dan hal-hal seperti itu tetapi ini adalah idenya.

Piacenti
sumber
file_put_contents ($ fname, file_get_contents ($ _ POST ['data'])); file_get_contents berkaitan dengan decoding dan data: // header
Nande
5
<html>
    <head>
        <title>Ajax file upload</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function (e) {
            $("#uploadimage").on('submit', (function(e) {
            e.preventDefault();
                    $.ajax({
                    url: "upload.php", // Url to which the request is send
                            type: "POST", // Type of request to be send, called as method
                            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                            contentType: false, // The content type used when sending data to the server.
                            cache: false, // To unable request pages to be cached
                            processData:false, // To send DOMDocument or non processed data file it is set to false
                            success: function(data)   // A function to be called if request succeeds
                            {
                            alert(data);
                            }
                    });
            }));
        </script>
    </head>
    <body>
        <div class="main">
            <h1>Ajax Image Upload</h1><br/>
            <hr>
            <form id="uploadimage" action="" method="post" enctype="multipart/form-data">
                <div id="image_preview"><img id="previewing" src="noimage.png" /></div>
                <hr id="line">
                <div id="selectImage">
                    <label>Select Your Image</label><br/>
                    <input type="file" name="file" id="file" required />
                    <input type="submit" value="Upload" class="submit" />
                </div>
            </form>
        </div>
    </body>
</html>
Nikit Barochiya
sumber
4

Anda dapat menggunakan metode ajaxSubmit sebagai berikut :) ketika Anda memilih file yang perlu diunggah ke server, formulir kirimkan ke server :)

$(document).ready(function () {
    var options = {
    target: '#output',   // target element(s) to be updated with server response
    timeout: 30000,
    error: function (jqXHR, textStatus) {
            $('#output').html('have any error');
            return false;
        }
    },
    success: afterSuccess,  // post-submit callback
    resetForm: true
            // reset the form after successful submit
};

$('#idOfInputFile').on('change', function () {
    $('#idOfForm').ajaxSubmit(options);
    // always return false to prevent standard browser submit and page navigation
    return false;
});
});
Quy Le
sumber
2
Saya yakin Anda berbicara tentang plugin form jquery . Ini benar-benar pilihan terbaik di sini, terlepas dari kurangnya detail dalam jawaban Anda.
fotanus
@ botus kau benar! script yang harus menggunakan plugin jquery form untuk mengirimkan menggunakan metode ajaxSubmit yang mendefinisikan dalam plugin form jquery
Quy Le
4

untuk mengunggah file yang dikirimkan oleh pengguna sebagai bagian dari formulir menggunakan jquery silakan ikuti kode di bawah ini:

var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);

Kemudian mengirim objek data formulir ke server.

Kami juga dapat menambahkan File atau Blob langsung ke objek FormData.

data.append("myfile", myBlob, "filename.txt");
VISHNU Radhakrishnan
sumber
3

Jika Anda ingin mengunggah file menggunakan AJAX di sini adalah kode yang dapat Anda gunakan untuk mengunggah file.

$(document).ready(function() {
    var options = { 
                beforeSubmit:  showRequest,
        success:       showResponse,
        dataType: 'json' 
        }; 
    $('body').delegate('#image','change', function(){
        $('#upload').ajaxForm(options).submit();        
    }); 
});     
function showRequest(formData, jqForm, options) { 
    $("#validation-errors").hide().empty();
    $("#output").css('display','none');
    return true; 
} 
function showResponse(response, statusText, xhr, $form)  { 
    if(response.success == false)
    {
        var arr = response.errors;
        $.each(arr, function(index, value)
        {
            if (value.length != 0)
            {
                $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'</strong><div>');
            }
        });
        $("#validation-errors").show();
    } else {
         $("#output").html("<img src='"+response.file+"' />");
         $("#output").css('display','block');
    }
}

Ini adalah HTML untuk Mengunggah file

<form class="form-horizontal" id="upload" enctype="multipart/form-data" method="post" action="upload/image'" autocomplete="off">
    <input type="file" name="image" id="image" /> 
</form>
Nikunj K.
sumber
3

Untuk mendapatkan semua input formulir Anda, termasuk tipe = "file" Anda harus menggunakan objek FormData . Anda akan dapat melihat konten formData di debugger -> network -> Headers setelah Anda mengirimkan formulir.

var url = "YOUR_URL";

var form = $('#YOUR_FORM_ID')[0];
var formData = new FormData(form);


$.ajax(url, {
    method: 'post',
    processData: false,
    contentType: false,
    data: formData
}).done(function(data){
    if (data.success){ 
        alert("Files uploaded");
    } else {
        alert("Error while uploading the files");
    }
}).fail(function(data){
    console.log(data);
    alert("Error while uploading the files");
});
David
sumber
2
var dataform = new FormData($("#myform")[0]);
//console.log(dataform);
$.ajax({
    url: 'url',
    type: 'POST',
    data: dataform,
    async: false,
    success: function(res) {
        response data;
    },
    cache: false,
    contentType: false,
    processData: false
});
Jayesh Paunikar
sumber
5
Anda dapat meningkatkan jawaban Anda dengan menambahkan beberapa detail
SR
1

Inilah ide yang saya pikirkan:

Have an iframe on page and have a referencer.

Memiliki formulir tempat Anda memindahkan INPUT: Elemen file.

Form:  A processing page AND a target of the FRAME.

Hasilnya akan dikirim ke bingkai, dan kemudian Anda bisa mengirim data yang diambil naik level ke tag gambar yang Anda inginkan dengan sesuatu seperti:

data:image/png;base64,asdfasdfasdfasdfa

dan halaman dimuat.

Saya percaya itu bekerja untuk saya, dan tergantung Anda mungkin dapat melakukan sesuatu seperti:

.aftersubmit(function(){
    stopPropigation()// or some other code which would prevent a refresh.
});
Fallenreaper
sumber
Saya tidak melihat bagaimana ini meningkatkan jawaban lain yang diberikan sebelumnya. Juga itu Propagasi bukan proposisi! ;)
JDuarteDJ