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?

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.

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 ...

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);
    }
  });
});

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.

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.

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');
  }
});

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.

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);

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) {
                // ...
            }
       });
    }));
});

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.

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).

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.

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
    }
});

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);
}

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

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.

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
                };


        }

    }

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
    });
});

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

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

Kamu bisa menggunakan

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

Demo

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);

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

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>

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)
{
    [...]
}

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 ...

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.

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;
}

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()
        )
    ));
}

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;)