Bagaimana saya bisa mengunggah file secara tidak sinkron?


2914

Saya ingin mengunggah file secara tidak sinkron dengan jQuery.

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Alih-alih file yang diunggah, saya hanya mendapatkan nama file. Apa yang bisa saya lakukan untuk memperbaiki masalah ini?


Ada berbagai plugin yang sudah jadi untuk melakukan upload file untuk jQuery. Melakukan unggahan peretasan seperti ini bukanlah pengalaman yang menyenangkan, jadi orang-orang senang menggunakan solusi yang sudah jadi. Berikut beberapa: - JQuery Berkas Uploader - Beberapa Upload File Plugin - Mini Beberapa Upload File - jQuery Upload File Anda dapat mencari proyek-proyek lebih lanjut tentang NPM (menggunakan "jquery-plugin" sebagai kata kunci) atau di Github.
Ceria

72
Anda hanya mendapatkan nama file karena nama file var Anda mendapatkan nilai $ ('# file'), bukan file yang terletak pada input
Jimmy

21
Inilah yang bagus: http://blueimp.github.io/jQuery-File-Upload/ - Mengunggah ajax HTML5 - Pengunduran yang anggun ke iframe untuk browser yang tidak didukung - Pengunggahan multi-file async Kami telah menggunakannya dan berfungsi dengan baik. ( Dokumentasi di sini )
Ashish Panery

3
Periksa juga ini: stackoverflow.com/questions/6974684/… , di sini ia menjelaskan cara mencapainya melalui jQuery
Chococroc

2
@ Jimmy Bagaimana dia mendapatkan file yang terletak pada input?
alex

Jawaban:


2519

Dengan HTML5 Anda dapat membuat unggahan file dengan Ajax dan jQuery. Tidak hanya itu, Anda dapat melakukan validasi file (nama, ukuran, dan tipe MIME) atau menangani acara progres dengan tag progres HTML5 (atau div). Baru-baru ini saya harus membuat pengunggah file, tetapi saya tidak ingin menggunakan Flash atau Iframe atau plugins dan setelah beberapa penelitian saya menemukan solusinya.

HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

Pertama, Anda dapat melakukan validasi jika mau. Misalnya, dalam .on('change')hal file:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

Sekarang $.ajax()kirim dengan klik tombol:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

Seperti yang Anda lihat, mengunggah file HTML5 (dan beberapa penelitian) tidak hanya menjadi mungkin tetapi juga sangat mudah. Cobalah dengan Google Chrome karena beberapa komponen HTML5 dari contoh tidak tersedia di setiap browser.


14
Bisakah saya menggunakan $ _FILES di upload.php?
Alessandro Cosentino

71
Ini seharusnya berfungsi di Internet Explorer tetapi hanya Versi 10. ( caniuse.com/xhr2 )
Tyler

18
Hai, saya menghargai PHP adalah bahasa pilihan Anda ... tapi saya ingin tahu apakah Anda tahu apakah ini juga berfungsi di ASP.NET MVC? Saya adalah pengembang .NET dan saya telah mencoba memanfaatkan contoh sederhana Anda untuk melakukan beberapa pengunggahan file AJAX tetapi di sisi server saya tidak mendapatkan file yang saya posting melalui AJAX. Saya menggunakan Chrome terbaru.
Shumii

25
Ini FormData yang melakukan semua keajaiban di sini. Pastikan untuk memeriksa dokumen ini - ini mencakup semua pertanyaan Anda tentang banyak file dan bidang.
Menjelma

4
Hanya supaya orang lain tidak menghabiskan waktu berjam-jam ... name="file"itu sangat penting pada <input>tag file jika Anda akan menggunakan data dalam PHP (dan mungkin tempat lain). Saya membuat formulir secara dinamis menggunakan javascript jadi saya tidak perlu atribut nama tetapi menemukan cara yang sulit Anda benar-benar membutuhkannya untuk mengambil data sisi server.
Kivak Wolf

273

Pembaruan 2019: Masih tergantung pada browser yang Anda gunakan secara demografis.

Satu hal penting untuk dipahami dengan fileAPI HTML5 "baru" adalah bahwa itu tidak didukung sampai IE 10 . Jika pasar spesifik yang Anda tuju memiliki kecenderungan lebih tinggi dari rata-rata terhadap versi Windows yang lebih lama, Anda mungkin tidak memiliki akses ke sana.

Pada 2017, sekitar 5% browser adalah salah satu dari IE 6, 7, 8 atau 9. Jika Anda menuju ke perusahaan besar (misalnya, ini adalah alat B2B, atau sesuatu yang Anda berikan untuk pelatihan) jumlah itu dapat meroket . Pada 2016, saya berurusan dengan perusahaan yang menggunakan IE8 di lebih dari 60% mesin mereka.

Ini 2019 pada edit ini, hampir 11 tahun setelah jawaban awal saya. IE9 dan lebih rendah secara global berada di sekitar angka 1% tetapi masih ada kelompok penggunaan yang lebih tinggi.

Yang penting dibawa pulang dari ini — apa pun fiturnya — adalah, periksa browser apa yang digunakan pengguna Anda . Jika tidak, Anda akan belajar pelajaran yang cepat dan menyakitkan tentang mengapa "bekerja untuk saya" tidak cukup baik dalam pengiriman ke klien. caniuse adalah alat yang berguna tetapi perhatikan dari mana mereka mendapatkan demografi mereka. Mereka mungkin tidak sejajar dengan Anda. Ini tidak pernah lebih benar daripada lingkungan perusahaan.

Jawaban saya dari 2008 berikut.


Namun, ada metode unggah file non-JS yang layak. Anda dapat membuat iframe di halaman (yang Anda sembunyikan dengan CSS) dan kemudian menargetkan formulir Anda untuk mengirim ke iframe itu. Halaman utama tidak perlu dipindahkan.

Ini adalah posting "nyata" sehingga tidak sepenuhnya interaktif. Jika Anda memerlukan status, Anda memerlukan sesuatu di sisi server untuk memprosesnya. Ini sangat bervariasi tergantung pada server Anda. ASP.NET memiliki mekanisme yang lebih baik. PHP plain gagal, tetapi Anda dapat menggunakan Perl modifikasi atau Apache untuk menyiasatinya.

Jika Anda memerlukan banyak unggahan file, sebaiknya lakukan setiap file satu per satu (untuk mengatasi batas unggah file maksimum). Posting bentuk pertama ke iframe, pantau progresnya menggunakan yang di atas dan setelah selesai, posting bentuk kedua ke iframe, dan seterusnya.

Atau gunakan solusi Java / Flash. Mereka jauh lebih fleksibel dalam hal apa yang dapat mereka lakukan dengan posting mereka ...


142
Sebagai catatan sekarang mungkin untuk melakukan unggahan file AJAX murni jika browser mendukung API File - developer.mozilla.org/en/using_files_from_web_applications
meleyal

solusi iframe cukup sederhana dan mudah untuk bekerja
Matthew Lock

ini adalah jawaban yang cukup lama, tapi itu agak menyesatkan .. IE mendukung XHR secara native sejauh IE7, dan mendukungnya melalui ActiveX sejauh IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp . Cara praktis untuk melakukan ini tentu saja menargetkan komponen flash (gelombang kejut), atau meluncurkan kontrol Flash / ActiveX (Silverlight). Jika Anda dapat membuat permintaan dan menangani respons melalui javascript, itu ajax .. meskipun, setelah mengatakan itu, ajax identik dengan xhr, tetapi itu sendiri tidak menjelaskan mekanisme garis bawah / komponen yang mengirim / menukar muatan.
Brett Caswell

4
@ BrettCaswell Saya tidak mengatakan bahwa AJAX / XHR tidak mungkin, hanya saja tidak mungkin untuk memposting file dengan mereka pada versi IE yang lama — tapi selamanya. Itu benar dan tetap benar.
Oli

Ini bukan bagaimana, ini pendapat UX - valid itu mungkin.
Nimjox

112

Saya sarankan menggunakan plugin Pengunggah Baik untuk tujuan ini. JavaScriptKode Anda adalah:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

Ini menggunakan JSON - jadi untuk versi lama PHP tidak akan mungkin digunakan.
Lorenzo Manucci

Tampaknya jauh lebih bersih daripada File Upload Ajax, di mana saya perlu memasukkan sepotong kode besar hanya untuk menggunakan hal itu.
ripper234

URL yang lebih baru untuk versi 2 sekarang valums-file-uploader.github.com/file-uploader
Simon East

35
"Plugin ini bersumber terbuka di bawah GNU GPL 2 atau lebih baru dan GNU LGPL 2 atau lebih baru." Jadi selama Anda tidak mendistribusikan salinan atau versi yang diubah, Anda tidak perlu membuka proyek Anda.
Trantor Liu

Apakah saya melewatkan sesuatu? Perpustakaan ini sepertinya tidak lagi menggunakan jquery, jadi tidak mendukung sintaksis dari jawabannya?
James McCormack

102

Catatan: Jawaban ini sudah usang, sekarang mungkin untuk mengunggah file menggunakan XHR.


Anda tidak dapat mengunggah file menggunakan XMLHttpRequest (Ajax). Anda dapat mensimulasikan efek menggunakan iframe atau Flash. Plugin Form jQuery yang sangat baik yang memposting file Anda melalui iframe untuk mendapatkan efek.


1
Ya, Anda dapat POST ke iframe dan mengambil file di sana. Saya memiliki pengalaman yang sangat terbatas dengan ini, jadi saya tidak bisa mengomentarinya.
Mattias

15
Ucapan kecil: dalam versi terbaru dari chrome dan firefox dimungkinkan, stackoverflow.com/questions/4856917/…
Alleo

Tidak didukung di IE9 dan kurang
Radmation

96

Membungkus untuk pembaca masa depan.

Unggah File Asinkron

Dengan HTML5

Anda dapat mengunggah file dengan jQuery menggunakan $.ajax()metode ini jika FormData dan File API didukung (kedua fitur HTML5).

Anda juga dapat mengirim file tanpa FormData tetapi bagaimanapun API File harus ada untuk memproses file sedemikian rupa sehingga mereka dapat dikirim dengan XMLHttpRequest (Ajax).

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Untuk contoh JavaScript cepat dan murni ( tanpa jQuery ) lihat " Mengirim file menggunakan objek FormData ".

Fallback

Ketika HTML5 tidak didukung (tanpa API File ) satu-satunya solusi JavaScript murni lainnya (tanpa Flash atau plugin browser lainnya) adalah teknik iframe tersembunyi , yang memungkinkan untuk meniru permintaan asinkron tanpa menggunakan objek XMLHttpRequest .

Ini terdiri dari pengaturan iframe sebagai target formulir dengan input file. Saat pengguna mengajukan permintaan dibuat dan file diunggah tetapi responsnya ditampilkan di dalam iframe alih-alih merender ulang halaman utama. Menyembunyikan iframe menjadikan seluruh proses transparan kepada pengguna dan mengemulasi permintaan asinkron.

Jika dilakukan dengan benar, ia seharusnya bekerja secara virtual pada peramban apa pun, tetapi memiliki beberapa peringatan sebagai cara untuk mendapatkan respons dari iframe.

Dalam hal ini Anda mungkin lebih suka menggunakan plugin wrapper seperti Bifröst yang menggunakan teknik iframe tetapi juga menyediakan transportasi jQuery Ajax yang memungkinkan untuk mengirim file hanya dengan $.ajax()metode seperti ini:

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Plugin

Bifröst hanyalah pembungkus kecil yang menambahkan dukungan fallback ke metode ajax jQuery, tetapi banyak dari plugin yang disebutkan di atas seperti jQuery Form Plugin atau jQuery File Upload menyertakan seluruh tumpukan dari HTML5 ke fallback yang berbeda dan beberapa fitur yang berguna untuk memudahkan proses. Bergantung pada kebutuhan dan persyaratan Anda, Anda mungkin ingin mempertimbangkan implementasi telanjang atau salah satu dari plugin ini.


3
Satu hal yang perlu diperhatikan, berdasarkan pada dokumentasi: Anda juga harus mengirim contentType: false. Ketika saya tidak mengirim ini dengan chrome, tipe konten formulir tidak valid oleh jQuery.
abu

Jawaban bagus. Beberapa saran untuk perbaikan: Hapus bagian-bagian kode yang tidak terkait dengan jawaban, misalnya .done()dan .fail()callback. Juga, sebuah contoh tanpa menggunakan FormDatadan daftar pro / kontra akan luar biasa.
Zero3

Saya mendapat kesalahan ini:TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
candjack

85

File AJAX ini mengunggah plugin jQuery yang mengunggah file ke suatu tempat, dan meneruskan respons ke panggilan balik, tidak ada yang lain.

  • Itu tidak tergantung pada HTML tertentu, cukup berikan a <input type="file">
  • Tidak memerlukan server Anda untuk merespons dengan cara tertentu
  • Tidak masalah berapa banyak file yang Anda gunakan, atau di mana mereka berada di halaman

- Gunakan sesedikit -

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

- atau sebanyak -

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

1
@ user840250 jQuery 1.9.1?
Jordan Feldstein

62

Saya telah menggunakan skrip di bawah ini untuk mengunggah gambar yang berfungsi dengan baik.

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

JavaScript

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

Penjelasan

Saya menggunakan respons divuntuk menampilkan animasi dan respons pengunggahan setelah pengunggahan selesai.

Bagian terbaiknya adalah Anda dapat mengirim data tambahan seperti id & dll dengan file saat Anda menggunakan skrip ini. Saya telah menyebutkannya extra-dataseperti dalam naskah.

Pada level PHP ini akan berfungsi sebagai unggahan file biasa. ekstra-data dapat diambil sebagai $_POSTdata.

Di sini Anda tidak menggunakan plugin dan yang lainnya. Anda dapat mengubah kode seperti yang Anda inginkan. Anda tidak coding secara buta di sini. Ini adalah fungsionalitas inti dari setiap unggahan file jQuery. Sebenarnya Javascript.


5
-1 untuk menggunakan jQuery dan tidak menggunakan mesin pemilih dan penangan acara. addEventListenerbukan cross-browser.
Markus

3
Karena tidak ada gunanya menambahkan jawaban terpisah yang sebagian besar didasarkan pada jawaban ini, hanya dengan beberapa perubahan. Sebagai gantinya, jawaban ini harus diperbaiki.
Markus

2
@RainFromHeaven, tolong, bisakah Anda mengedit jawabannya? Saya tidak tahu bagaimana melakukannya dengan cara cross-browser.
Thiago Negri

2
Masih tidak berfungsi di IE 9 dan ke bawah. Banyak pengguna masih menggunakan versi IE tersebut.
Pierre

1
Bisakah seseorang tolong jelaskan bagaimana ini bisa berfungsi di asp.net? Apakah saya menggunakan metode web? Jika ya seperti apa bentuknya?
SamuraiJack

49

Anda dapat melakukannya dengan mudah di vanilla JavaScript. Berikut cuplikan dari proyek saya saat ini:

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);

3
@Gary: Maaf, saya seharusnya memposting sedikit juga. Saya hanya menggunakan fungsionalitas drag-and-drop baru di HTML5; Anda dapat menemukan contoh di sini: html5demos.com/file-api#view-source - cukup klik "view source". Pada dasarnya, di dalam ondropacara yang dapat Anda lakukanvar file = e.dataTransfer.files[0]
buka

Mungkin pertanyaannya sudah diedit sejak itu, tetapi beberapa orang dalam diskusi mari saya buka berpikir bahwa jawaban vanilla JS adalah off topic jika OP meminta solusi jQuery (asalkan ada) dan jawaban semacam itu termasuk dalam pertanyaan terpisah.
Andy

4
@Andy Yah saya tidak setuju, dan sepertinya 34 orang lain juga. Jika Anda dapat menggunakan jQuery, maka Anda tentu dapat menggunakan JavaScript. Bagaimanapun, ini adalah situs komunitas - bukan hanya OP yang saya coba bantu di sini. Setiap orang bebas memilih / menggunakan jawaban yang paling mereka sukai. Beberapa orang hanya tertarik pada jQuery karena mereka pikir itu akan jauh lebih mudah / lebih sedikit baris kode, ketika mereka benar-benar tidak memerlukan overhead perpustakaan tambahan sama sekali.
buka

47

Anda dapat mengunggah hanya dengan jQuery .ajax().

HTML:

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

CSS

.progress { display: none; }

Javascript:

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});

1
@ RaydenBlack hanya jQuery.
Zayn Ali

bagaimana cara mendapatkan kemajuan unggahan?
Ali Sherafat

44

Cara paling sederhana dan paling kuat yang pernah saya lakukan di masa lalu, adalah dengan hanya menargetkan tag iFrame tersembunyi dengan formulir Anda - maka itu akan mengirimkan dalam iframe tanpa memuat ulang halaman.

Itu jika Anda tidak ingin menggunakan plugin, JavaScript, atau bentuk "ajaib" selain HTML. Tentu saja Anda dapat menggabungkan ini dengan JavaScript atau apa saja ...

<form target="iframe" action="" method="post" enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

<iframe name="iframe" id="iframe" style="display:none" ></iframe>

Anda juga dapat membaca konten iframe onLoaduntuk kesalahan server atau respons sukses dan kemudian menampilkannya kepada pengguna.

Chrome, iFrames, dan onLoad

-Catatan- Anda hanya perlu terus membaca jika Anda tertarik cara mengatur UI blocker ketika melakukan pengunggahan / pengunduhan

Saat ini Chrome tidak memicu acara onLoad untuk iframe ketika digunakan untuk mentransfer file. Firefox, IE, dan Edge semua menjalankan event onload untuk transfer file.

Satu-satunya solusi yang saya temukan berfungsi untuk Chrome adalah menggunakan cookie.

Untuk melakukan itu pada dasarnya ketika unggahan / unduhan dimulai:

  • [Sisi Klien] Mulai interval untuk mencari keberadaan cookie
  • [Sisi Server] Lakukan apa pun yang Anda perlukan dengan data file
  • [Sisi Server] Tetapkan cookie untuk interval sisi klien
  • [Sisi Klien] Interval melihat cookie dan menggunakannya seperti acara onLoad. Misalnya Anda dapat memulai pemblokir UI dan kemudian onLoad (atau ketika cookie dibuat) Anda menghapus pemblokir UI.

Menggunakan cookie untuk ini jelek tapi berhasil.

Saya membuat plugin jQuery untuk menangani masalah ini untuk Chrome saat mengunduh, Anda dapat menemukannya di sini

https://github.com/ArtisticPhoenix/jQuery-Plugins/blob/master/iDownloader.js

Prinsip dasar yang sama juga berlaku untuk mengunggah.

Untuk menggunakan pengunduh (sertakan JS, tentu saja)

 $('body').iDownloader({
     "onComplete" : function(){
          $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
     }
 });

 $('somebuttion').click( function(){
      $('#uiBlocker').css('display', 'block'); //block the UI
      $('body').iDownloader('download', 'htttp://example.com/location/of/download');
 });

Dan di sisi server, tepat sebelum mentransfer data file, buat cookie

 setcookie('iDownloader', true, time() + 30, "/");

Plugin akan melihat cookie, dan kemudian memicu onCompletepanggilan balik.


3
Aku menyukainya. Kalau saja seseorang bisa menyebutkan potensi masalah dengan solusi cemerlang ini. Saya benar-benar tidak mengerti mengapa orang berpikir dan menggunakan perpustakaan dan plugin yang kikuk ini ketika ada solusinya.
Yevgeniy Afanasyev

1
Yah, saya kira alasannya adalah untuk menunjukkan beberapa info kemajuan saat mengunggah.
Prakhar Mishra

32

Solusi yang saya temukan adalah memiliki <form>target iFrame tersembunyi. IFrame kemudian dapat menjalankan JS untuk menampilkan kepada pengguna bahwa itu lengkap (saat memuat halaman).


1
Saya tertarik dengan jawaban ini, apakah Anda memiliki demo yang dapat Anda tautkan?
lfender6445

32

Saya sudah menulis ini di lingkungan Rails . Ini hanya sekitar lima baris JavaScript, jika Anda menggunakan plugin jQuery-form yang ringan.

Tantangannya adalah agar unggahan AJAX berfungsi karena standar remote_form_fortidak memahami pengiriman formulir multi-bagian. Itu tidak akan mengirim file data Rails mencari kembali dengan permintaan AJAX.

Di situlah plugin jQuery-form ikut bermain.

Inilah kode Rails untuknya:

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

Ini JavaScript terkait:

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

Dan inilah aksi pengontrol Rails, vanilla cantik:

 @image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

Saya telah menggunakan ini selama beberapa minggu terakhir dengan Bloggity, dan itu berfungsi seperti juara.


31

Pengunggah Ajax Sederhana adalah pilihan lain:

https://github.com/LPology/Simple-Ajax-Uploader

  • Cross-browser - berfungsi di IE7 +, Firefox, Chrome, Safari, Opera
  • Mendukung banyak, pengunggahan bersamaan - bahkan di browser non-HTML5
  • Tidak ada flash atau CSS eksternal - hanya satu file Javascript 5Kb
  • Opsional, dukungan bawaan untuk bilah kemajuan lintas-peramban sepenuhnya (menggunakan ekstensi APC PHP)
  • Fleksibel dan sangat dapat dikustomisasi - gunakan elemen apa pun sebagai tombol unggah, atur indikator kemajuan Anda sendiri
  • Tidak diperlukan formulir, cukup sediakan elemen yang akan berfungsi sebagai tombol unggah
  • Lisensi MIT - gratis untuk digunakan dalam proyek komersial

Contoh penggunaan:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

2
Ini tampaknya yang paling menjanjikan sejauh ini, Anda berhasil IE7+! Cobalah sekarang. Terima kasih
Pierre

25

jQuery Uploadify adalah plugin bagus lain yang telah saya gunakan sebelumnya untuk mengunggah file. Kode JavaScript sesederhana berikut: kode. Namun, versi baru tidak berfungsi di Internet Explorer.

$('#file_upload').uploadify({
    'swf': '/public/js/uploadify.swf',
    'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
    'cancelImg': '/public/images/uploadify-cancel.png',
    'multi': true,
    'onQueueComplete': function (queueData) {
        // ...
    },
    'onUploadStart': function (file) {
        // ...
    }
});

Saya telah melakukan banyak pencarian dan saya datang ke solusi lain untuk mengunggah file tanpa plugin apa pun dan hanya dengan ajax. Solusinya adalah sebagai berikut:

$(document).ready(function () {
    $('#btn_Upload').live('click', AjaxFileUpload);
});

function AjaxFileUpload() {
    var fileInput = document.getElementById("#Uploader");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'Uploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}

2
Uploadify telah mati selama bertahun-tahun. Tidak didukung atau dipertahankan lagi.
Ray Nicholus

24

Berikut ini hanyalah solusi lain tentang cara mengunggah file ( tanpa plugin apa pun )

Menggunakan Javascripts dan AJAX sederhana (dengan progress-bar)

Bagian HTML

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

Bagian JS

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

Bagian PHP

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

Inilah aplikasi CONTOH


19
var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

Anda dapat menggunakan data formulir untuk mengirim semua nilai Anda termasuk gambar.


6
Catatan: cache: falseberlebihan pada POSTpermintaan karena POST tidak pernah menyimpan cache.
Hilang Coding

@Vivek Aasaithambi, saya mendapat kesalahan ini:TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
candjack

15

Untuk mengunggah file secara tidak sinkron dengan Jquery, gunakan langkah-langkah di bawah ini:

langkah 1 Dalam proyek Anda, buka Nuget manager dan tambahkan paket (jquery fileupload (hanya Anda perlu menuliskannya di kotak pencarian, itu akan muncul dan menginstalnya.)) URL: https://github.com/blueimp/jQuery-File- Unggah

langkah 2 Tambahkan skrip di bawah ini dalam file HTML, yang sudah ditambahkan ke proyek dengan menjalankan paket di atas:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

langkah 3 Tulis kontrol unggah file sesuai kode di bawah ini:

<input id="upload" name="upload" type="file" />

langkah 4 tulis metode js sebagai uploadFile seperti di bawah ini:

 function uploadFile(element) {

            $(element).fileupload({

                dataType: 'json',
                url: '../DocumentUpload/upload',
                autoUpload: true,
                add: function (e, data) {           
                  // write code for implementing, while selecting a file. 
                  // data represents the file data. 
                  //below code triggers the action in mvc controller
                  data.formData =
                                    {
                                     files: data.files[0]
                                    };
                  data.submit();
                },
                done: function (e, data) {          
                   // after file uploaded
                },
                progress: function (e, data) {

                   // progress
                },
                fail: function (e, data) {

                   //fail operation
                },
                stop: function () {

                  code for cancel operation
                }
            });

        };

langkah 5 Dalam unggahan file elemen panggilan fungsi siap untuk memulai proses seperti di bawah ini:

$(document).ready(function()
{
    uploadFile($('#upload'));

});

Langkah 6 Tulis kontrol dan Aksi MVC seperti di bawah ini:

public class DocumentUploadController : Controller
    {       

        [System.Web.Mvc.HttpPost]
        public JsonResult upload(ICollection<HttpPostedFileBase> files)
        {
            bool result = false;

            if (files != null || files.Count > 0)
            {
                try
                {
                    foreach (HttpPostedFileBase file in files)
                    {
                        if (file.ContentLength == 0)
                            throw new Exception("Zero length file!");                       
                        else 
                            //code for saving a file

                    }
                }
                catch (Exception)
                {
                    result = false;
                }
            }


            return new JsonResult()
                {
                    Data=result
                };


        }

    }

14

Pendekatan modern tanpa Jquery adalah menggunakan objek FileList yang Anda dapatkan kembali <input type="file">ketika pengguna memilih file dan kemudian menggunakan Ambil untuk memposting FileList melilit objek FormData .

// The input DOM element // <input type="file">
const inputElement = document.querySelector('input[type=file]');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData();
    data.append('file', inputElement.files[0]);
    data.append('imageName', 'flower');

    // You can then post it to your server.
    // Fetch can accept an object of type FormData on its  body
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    });
});

Rupanya tidak didukung pada IE
Marco Demaio

11

Anda dapat melihat solusi yang dipecahkan dengan demo yang berfungsi di sini yang memungkinkan Anda untuk melihat pratinjau dan mengirimkan file formulir ke server. Untuk kasus Anda, Anda perlu menggunakan Ajax untuk memfasilitasi pengunggahan file ke server:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

Data yang dikirim adalah formdata. Di jQuery Anda, gunakan fungsi kirim formulir alih-alih klik tombol untuk mengirimkan file formulir seperti yang ditunjukkan di bawah ini.

$(document).ready(function () {
   $("#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("successfully submitted");

     });
   });
});

Lihat lebih detail


11

Contoh: Jika Anda menggunakan jQuery, Anda dapat dengan mudah mengunggah file. Ini adalah plugin jQuery yang kecil dan kuat, http://jquery.malsup.com/form/ .

Contoh

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

Saya harap ini akan membantu


10

Kamu bisa menggunakan

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

Demo


9

Konversikan file ke base64 menggunakan readAsDataURL () HTML5 () atau encoder base64 . Biola di sini

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

Kemudian untuk mengambil:

window.open("data:application/octet-stream;base64," + base64);

9

Anda dapat memberikan parameter tambahan bersama dengan nama file untuk membuat unggahan asinkron menggunakan XMLHttpRequest (tanpa flash dan ketergantungan iframe). Tambahkan nilai parameter tambahan dengan FormData dan kirim permintaan unggahan.


var formData = new FormData();
formData.append('parameter1', 'value1');
formData.append('parameter2', 'value2'); 
formData.append('file', $('input[type=file]')[0].files[0]);

$.ajax({
    url: 'post back url',
    data: formData,
// other attributes of AJAX
});

Juga, unggahan file Syncfusion JavaScript UI memberikan solusi untuk skenario ini hanya dengan menggunakan argumen acara. Anda dapat menemukan dokumentasi di sini dan rincian lebih lanjut tentang kontrol ini di sini masukkan deskripsi tautan di sini


8

Cari Menangani proses pengunggahan untuk file, asinkron di sini: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Sampel dari tautan

<?php
if (isset($_FILES['myFile'])) {
    // Example:
    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
    exit;
}
?><!DOCTYPE html>
<html>
<head>
    <title>dnd binary upload</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function sendFile(file) {
            var uri = "/index.php";
            var xhr = new XMLHttpRequest();
            var fd = new FormData();

            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    alert(xhr.responseText); // handle response.
                }
            };
            fd.append('myFile', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }

        window.onload = function() {
            var dropzone = document.getElementById("dropzone");
            dropzone.ondragover = dropzone.ondragenter = function(event) {
                event.stopPropagation();
                event.preventDefault();
            }

            dropzone.ondrop = function(event) {
                event.stopPropagation();
                event.preventDefault();

                var filesArray = event.dataTransfer.files;
                for (var i=0; i<filesArray.length; i++) {
                    sendFile(filesArray[i]);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
    </div>
</body>
</html>

7

Ini solusi saya.

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

dan js

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

Pengendali

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    [...]
}

2
Anda tampaknya telah mencampur beberapa jenis kerangka kerja ke dalam jawaban Anda. Paling tidak Anda harus menyebutkan kerangka kerja yang dapat digunakan jawaban Anda. Lebih baik lagi, hapus semua hal kerangka kerja dan hanya berikan jawaban untuk pertanyaan yang diajukan.
Zero3

2
jadi sebenarnya ada kerangka mvc yang disebut "mvc"? dan menggunakan sintaks csharpish? itu kejam.
nonchip

6

Menggunakan HTML5 dan JavaScript , mengunggah async cukup mudah, saya membuat logika pengunggahan bersama dengan html Anda, ini tidak sepenuhnya berfungsi karena membutuhkan api, tetapi tunjukkan cara kerjanya, jika Anda memiliki endpoint yang dipanggil /uploaddari root situs web Anda, kode ini akan bekerja untuk Anda:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}
<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

Juga beberapa informasi lebih lanjut tentang XMLHttpReques:

Objek XMLHttpRequest

Semua browser modern mendukung objek XMLHttpRequest. Objek XMLHttpRequest dapat digunakan untuk bertukar data dengan server web di belakang layar. Ini berarti bahwa adalah mungkin untuk memperbarui bagian halaman web, tanpa memuat ulang seluruh halaman.


Buat Obyek XMLHttpRequest

Semua browser modern (Chrome, Firefox, IE7 +, Edge, Safari, Opera) memiliki objek XMLHttpRequest bawaan.

Sintaks untuk membuat objek XMLHttpRequest:

variable = new XMLHttpRequest ();


Akses Lintas Domain

Demi alasan keamanan, peramban modern tidak mengizinkan akses lintas domain.

Ini berarti bahwa halaman web dan file XML yang dicoba untuk memuatnya, harus berada di server yang sama.

Contoh-contoh di W3Schools semua file XML terbuka yang terletak di domain W3Schools.

Jika Anda ingin menggunakan contoh di atas pada salah satu halaman web Anda sendiri, file XML yang Anda muat harus berada di server Anda sendiri.

Untuk detail lebih lanjut, Anda dapat melanjutkan membaca di sini ...


5

Anda dapat menggunakan Fetch API yang lebih baru dengan JavaScript. Seperti ini:

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // you can do something with response
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
}                               

Keuntungan: Ambil API didukung secara native oleh semua browser modern, jadi Anda tidak perlu mengimpor apa pun. Juga, perhatikan bahwa fetch () mengembalikan Janji yang kemudian ditangani dengan menggunakan secara tidak .then(..code to handle response..)sinkron.


4

Anda dapat melakukan unggahan Banyak File Asynchronous menggunakan JavaScript atau jQuery dan tanpa menggunakan plugin apa pun. Anda juga dapat menampilkan kemajuan waktu nyata dari unggahan file dalam kontrol kemajuan. Saya menemukan 2 tautan bagus -

  1. ASP.NET Berbasis Web Mulitple File Upload Fitur Fitur dengan Progress Bar
  2. Unggah Banyak File ASP.NET MVC berbasis jQuery

Bahasa sisi server adalah C # tetapi Anda dapat melakukan beberapa modifikasi untuk membuatnya bekerja dengan bahasa lain seperti PHP.

Unggah File ASP.NET Core MVC:

Dalam Lihat buat kontrol unggah file dalam html:

<form method="post" asp-action="Add" enctype="multipart/form-data">
    <input type="file" multiple name="mediaUpload" />
    <button type="submit">Submit</button>
</form>

Sekarang buat metode tindakan di controller Anda:

[HttpPost]
public async Task<IActionResult> Add(IFormFile[] mediaUpload)
{
    //looping through all the files
    foreach (IFormFile file in mediaUpload)
    {
        //saving the files
        string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
        using (var stream = new FileStream(path, FileMode.Create))
        {
            await file.CopyToAsync(stream);
        }
    }
}

variabel hostingEnvironment adalah tipe IHostingEnvironment yang dapat disuntikkan ke controller menggunakan injeksi dependensi, seperti:

private IHostingEnvironment hostingEnvironment;
public MediaController(IHostingEnvironment environment)
{
    hostingEnvironment = environment;
}

Bisakah Anda memasukkan esensi solusi dalam jawaban Anda, karena jika tidak maka akan menjadi tidak berguna jika situs web yang ditautkan berubah atau menjadi offline.
Dima Kozhevin

4

Untuk PHP, cari https://developer.hyvor.com/php/image-upload-ajax-php-mysql

HTML

<html>
<head>
    <title>Image Upload with AJAX, PHP and MYSQL</title>
</head>
<body>
<form onsubmit="submitForm(event);">
    <input type="file" name="image" id="image-selecter" accept="image/*">
    <input type="submit" name="submit" value="Upload Image">
</form>
<div id="uploading-text" style="display:none;">Uploading...</div>
<img id="preview">
</body>
</html>

JAVASCRIPT

var previewImage = document.getElementById("preview"),  
    uploadingText = document.getElementById("uploading-text");

function submitForm(event) {
    // prevent default form submission
    event.preventDefault();
    uploadImage();
}

function uploadImage() {
    var imageSelecter = document.getElementById("image-selecter"),
        file = imageSelecter.files[0];
    if (!file) 
        return alert("Please select a file");
    // clear the previous image
    previewImage.removeAttribute("src");
    // show uploading text
    uploadingText.style.display = "block";
    // create form data and append the file
    var formData = new FormData();
    formData.append("image", file);
    // do the ajax part
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            var json = JSON.parse(this.responseText);
            if (!json || json.status !== true) 
                return uploadError(json.error);

            showImage(json.url);
        }
    }
    ajax.open("POST", "upload.php", true);
    ajax.send(formData); // send the form data
}

PHP

<?php
$host = 'localhost';
$user = 'user';
$password = 'password';
$database = 'database';
$mysqli = new mysqli($host, $user, $password, $database);


 try {
    if (empty($_FILES['image'])) {
        throw new Exception('Image file is missing');
    }
    $image = $_FILES['image'];
    // check INI error
    if ($image['error'] !== 0) {
        if ($image['error'] === 1) 
            throw new Exception('Max upload size exceeded');

        throw new Exception('Image uploading error: INI Error');
    }
    // check if the file exists
    if (!file_exists($image['tmp_name']))
        throw new Exception('Image file is missing in the server');
    $maxFileSize = 2 * 10e6; // in bytes
    if ($image['size'] > $maxFileSize)
        throw new Exception('Max size limit exceeded'); 
    // check if uploaded file is an image
    $imageData = getimagesize($image['tmp_name']);
    if (!$imageData) 
        throw new Exception('Invalid image');
    $mimeType = $imageData['mime'];
    // validate mime type
    $allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
    if (!in_array($mimeType, $allowedMimeTypes)) 
        throw new Exception('Only JPEG, PNG and GIFs are allowed');

    // nice! it's a valid image
    // get file extension (ex: jpg, png) not (.jpg)
    $fileExtention = strtolower(pathinfo($image['name'] ,PATHINFO_EXTENSION));
    // create random name for your image
    $fileName = round(microtime(true)) . mt_rand() . '.' . $fileExtention; // anyfilename.jpg
    // Create the path starting from DOCUMENT ROOT of your website
    $path = '/examples/image-upload/images/' . $fileName;
    // file path in the computer - where to save it 
    $destination = $_SERVER['DOCUMENT_ROOT'] . $path;

    if (!move_uploaded_file($image['tmp_name'], $destination))
        throw new Exception('Error in moving the uploaded file');

    // create the url
    $protocol = stripos($_SERVER['SERVER_PROTOCOL'],'https') === true ? 'https://' : 'http://';
    $domain = $protocol . $_SERVER['SERVER_NAME'];
    $url = $domain . $path;
    $stmt = $mysqli -> prepare('INSERT INTO image_uploads (url) VALUES (?)');
    if (
        $stmt &&
        $stmt -> bind_param('s', $url) &&
        $stmt -> execute()
    ) {
        exit(
            json_encode(
                array(
                    'status' => true,
                    'url' => $url
                )
            )
        );
    } else 
        throw new Exception('Error in saving into the database');

} catch (Exception $e) {
    exit(json_encode(
        array (
            'status' => false,
            'error' => $e -> getMessage()
        )
    ));
}

4

Anda juga dapat mempertimbangkan untuk menggunakan sesuatu seperti https://uppy.io .

Itu mengunggah file tanpa menavigasi jauh dari halaman dan menawarkan beberapa bonus seperti drag & drop, melanjutkan unggahan jika browser crash / jaringan terkelupas, dan mengimpor dari misalnya Instagram. Ini open source dan tidak bergantung pada jQuery / React / Angular / Vue, tetapi dapat digunakan dengannya. Penafian: sebagai pencipta saya bias;)


Tautan di atas sudah mati. Inilah github: github.com/transloadit/uppy
Chris Charles

uppy.io apakah halaman CloudFlare + GitHub didukung, dan cocok untuk saya? Masih berguna untuk memiliki tautan repo langsung juga :)
kvz
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.