JQuery ile eşzamansız bir dosya yüklemek istiyorum.

$(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"/>

Yüklenen dosya yerine sadece dosya adını alıyorum. Bu sorunu gidermek için ne yapabilirim?

İle HTML5 Eğer Ajax ve jQuery ile dosya yüklemeleri yapabilirsiniz. Sadece bu değil, dosya doğrulamaları (ad, boyut ve MIME türü) yapabilir veya progress olayını HTML5 ilerleme etiketi (veya div) ile işleyebilirsiniz. Son zamanlarda bir dosya yükleyici yapmak zorunda kaldım, ancak Flash ne de Iframes veya eklentileri kullanmak istemedim ve bazı araştırmalardan sonra çözüm buldum.

HTML:

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

İlk olarak, isterseniz bazı doğrulama yapabilirsiniz. Örneğin .on('change'), dosya durumunda:

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

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

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

Şimdi $.ajax()düğmeyi tıklayarak gönderin:

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

Gördüğünüz gibi, HTML5 (ve bazı araştırmalar) ile dosya yüklemek sadece mümkün değil, aynı zamanda süper kolay. Örneklerin HTML5 bileşenlerinden bazıları her tarayıcıda bulunmadığından Google Chrome ile deneyin .

2019 Güncelleme: O hala tarayıcılarda bağlıdır sizin demografik kullanımları.

"Yeni" HTML5 fileAPI ile anlaşılması gereken önemli bir nokta, IE 10'a kadar desteklenmemesidir . Hedeflediğiniz pazarın eski Windows sürümlerine göre ortalamanın üzerinde bir eğilimi varsa, pazara erişiminiz olmayabilir.

2017 itibariyle, tarayıcıların yaklaşık% 5'i IE 6, 7, 8 veya 9'dan biridir. Büyük bir şirkete (örneğin, bu bir B2B aracı veya eğitim için verdiğiniz bir şey) girerseniz bu sayı fırlayabilir . 2016 yılında, makinelerinin% 60'ından fazlasında IE8 kullanan bir şirketle uğraştım.

Bu düzenlemeden itibaren, ilk cevabımdan neredeyse 11 yıl sonra 2019. IE9 ve daha düşükleri dünya çapında% 1 işareti civarındadır, ancak yine de daha yüksek kullanım kümeleri vardır.

Bundan önemli olan - özellik ne olursa olsun - kullanıcılarınızın hangi tarayıcıyı kullandığını kontrol edin . Bunu yapmazsanız, "benim için çalışıyor" un neden bir müşteriye sunulacak kadar iyi olmadığına dair hızlı ve acı verici bir ders alacaksınız. caniuse yararlı bir araçtır, ancak demografik bilgilerini nereden aldıklarını unutmayın. Sizinkiyle hizalanmayabilirler. Bu asla kurumsal ortamlardan daha doğru değildir.

2008'den cevabım şöyle.

Ancak, JS olmayan geçerli dosya yükleme yöntemleri vardır. Sayfada bir iframe oluşturabilir (CSS ile gizlediğiniz) ve ardından formunuzu bu iframe'e gönderecek şekilde hedefleyebilirsiniz. Ana sayfanın taşınmasına gerek yoktur.

Bu "gerçek" bir yazı, bu yüzden tamamen interaktif değil. Duruma ihtiyacınız varsa, bunu işlemek için sunucu tarafında bir şeye ihtiyacınız vardır. Bu, sunucunuza bağlı olarak büyük ölçüde değişir. ASP.NET'in daha hoş mekanizmaları var. PHP ovası başarısız olur, ancak bunun için Perl veya Apache değişikliklerini kullanabilirsiniz.

Birden fazla dosya yüklemeye ihtiyacınız varsa, her dosyayı birer birer yapmak en iyisidir (maksimum dosya yükleme sınırlarını aşmak için). İlk formu iframe'e gönderin, yukarıdakileri kullanarak ilerlemesini izleyin ve bittiğinde ikinci formu iframe'e gönderin, vb.

Veya bir Java / Flash çözümü kullanın. Yazılarıyla neler yapabildikleri konusunda çok daha esnektirler ...

Bu amaçla Fine Uploader eklentisini kullanmanızı öneririm . Kişisel JavaScriptkod şöyle olacaktır:

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

Not: Bu cevap eski, artık XHR kullanarak dosya yüklemek mümkün.

XMLHttpRequest (Ajax) kullanarak dosya yükleyemezsiniz . Bir iframe veya Flash kullanarak efekti simüle edebilirsiniz. Etkisini elde etmek için dosyalarınızı bir iframe aracılığıyla gönderen mükemmel jQuery Form Eklentisi .

Gelecekteki okuyucular için hazırlanıyor.

Eşzamansız Dosya Yükleme

HTML5 ile

JQuery ile dosya yükleyebilirsinizFormData ve Dosya API'si destekleniyorsa (her iki HTML5 özelliği) $.ajax()yöntemi kullanarak .

Ayrıca dosya gönderebilirsiniz FormData'sız ancak her iki şekilde de dosyaları XMLHttpRequest (Ajax) ile gönderilebilecek şekilde işlemek için Dosya API'sının bulunması gerekir .

$.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!");
});

Hızlı ve saf bir JavaScript için ( jQuery yok ) örneği için bkz. " Dosyaları bir FormData nesnesi kullanarak gönderme ".

Geri çekil

HTML5 desteklenmediğinde ( Dosya API'sı yok ) yalnızca diğer saf JavaScript çözümü ( Flash veya başka bir tarayıcı eklentisi yok) XMLHttpRequest nesnesini kullanmadan eşzamansız bir istek taklit etmeyi sağlayan gizli iframe tekniğidir .

Dosya girişleriyle formun hedefi olarak bir iframe ayarlamaktan oluşur. Kullanıcı bir istek gönderdiğinde ve dosyalar yüklendiğinde, ancak yanıt ana sayfayı yeniden oluşturmak yerine iframe içinde görüntülenir. İframe'i gizlemek tüm işlemi kullanıcı için şeffaf hale getirir ve eşzamansız bir istek taklit eder.

Düzgün yapılırsa, neredeyse tüm tarayıcılarda çalışmalıdır, ancak iframe'den nasıl yanıt alınacağı konusunda bazı uyarılar vardır.

Bu durumda , iframe tekniğini kullanan ancak aynı zamanda sadece böyle bir yöntemle dosya göndermeye izin veren bir jQuery Ajax aktarımı sağlayan Bifröst gibi bir sarıcı eklentisi kullanmayı tercih edebilirsiniz :$.ajax()

$.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!");
});

eklentiler

Bifröst , jQuery'nin ajax yöntemine geri dönüş desteği ekleyen küçük bir sarmalayıcıdır, ancak jQuery Form Eklentisi veya jQuery Dosya Yükleme gibi yukarıda bahsedilen eklentilerin çoğu, HTML5'ten farklı geri dönüşlere kadar tüm yığını ve işlemi kolaylaştırmak için bazı yararlı özellikleri içerir. İhtiyaçlarınıza ve gereksinimlerinize bağlı olarak, çıplak bir uygulamayı veya bu eklentilerden birini düşünebilirsiniz.

Bu AJAX dosya yükleme jQuery eklentisi dosyayı bir yere yükler ve yanıtı geri aramaya iletir, başka bir şey değildir.

• Belirli bir HTML'ye bağlı değildir, sadece bir <input type="file">
• Sunucunuzun herhangi bir şekilde yanıt vermesini gerektirmez
• Kaç dosya kullandığınız ya da sayfada nerede oldukları önemli değildir.

- Kadar az kullanın -

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

- veya -

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

İyi çalışıyor görüntüleri yüklemek için aşağıdaki komut dosyası kullanıyorum.

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

açıklama

divYükleme tamamlandıktan sonra yükleme animasyonunu ve yanıtını göstermek için yanıt kullanıyorum .

En iyi bölüm, bu komut dosyasını kullandığınızda dosyayla ids & etc gibi ekstra veriler gönderebilirsiniz. extra-dataSenaryoda olduğu gibi bahsetmiştim .

PHP düzeyinde bu normal dosya yükleme olarak çalışacaktır. ekstra veri veri olarak alınabilir $_POST.

Burada bir eklenti ve malzeme kullanmıyorsunuz. Kodu istediğiniz gibi değiştirebilirsiniz. Burada körü körüne kodlama yapmıyorsunuz. Bu, herhangi bir jQuery dosya yüklemesinin temel işlevidir. Aslında Javascript.

Bunu vanilya JavaScript ile kolayca yapabilirsiniz. İşte mevcut projemden bir pasaj:

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

JQuery ile kolayca yükleyebilirsiniz .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) {
                // ...
            }
       });
    }));
});

Bunu geçmişte yaptığım en basit ve en sağlam yol, formunuzla gizli bir iFrame etiketini hedeflemektir - o zaman sayfayı yeniden yüklemeden iframe içinde gönderir.

HTML'den başka bir eklenti, JavaScript veya başka bir "sihirli" form kullanmak istemezsiniz. Elbette bunu JavaScript ile birleştirebilir veya neyiniz var ...

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

onLoadSunucu hataları veya başarı yanıtları için iframe'in içeriğini de okuyabilir ve daha sonra bunu kullanıcıya gönderebilirsiniz.

Chrome, iFrames ve onLoad

-note- sadece yükleme / indirme yaparken bir UI engelleyiciyi nasıl kuracağınızla ilgileniyorsanız okumaya devam etmeniz gerekir.

Şu anda Chrome, dosya aktarmak için kullanıldığında iframe için onLoad olayını tetiklememektedir. Firefox, IE ve Edge dosya aktarımları için onload olayını başlatır.

Chrome için işe yaradığını bulduğum tek çözüm bir çerez kullanmaktı.

Bunu temel olarak yükleme / indirme işlemi başlatıldığında yapmak için:

• [Müşteri Tarafı] Bir çerezin varlığını aramak için bir aralık başlatın
• [Sunucu Tarafı] Dosya verileriyle ne gerekiyorsa yapın
• [Server Side] İstemci tarafı aralığı için çerezi ayarla
• [İstemci Tarafı] Aralık, çerezi görür ve onLoad etkinliği gibi kullanır. Örneğin, bir kullanıcı arabirimi engelleyicisini başlatabilir ve ardından onLoad (veya çerez yapıldığında) kullanıcı arabirimi engelleyicisini kaldırırsınız.

Bunun için bir çerez kullanmak çirkin ama işe yarıyor.

İndirirken Chrome için bu sorunu ele almak için bir jQuery eklentisi yaptım, burada bulabilirsiniz

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

Aynı temel prensip yükleme için de geçerlidir.

İndiriciyi kullanmak için (tabii ki JS'yi ekleyin)

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

Ve sunucu tarafında, dosya verilerini aktarmadan hemen önce, çerez oluşturun

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

Eklenti çerezi görecek ve ardından onCompletegeri aramayı tetikleyecektir .

Bulduğum bir çözüm, <form>hedefi gizli bir iFrame'e sahip olmaktı. Daha sonra iFrame, kullanıcıya tamamlandığını (sayfa yüklenirken) görüntülemek için JS'yi çalıştırabilir.

Bunu bir Rails ortamında yazdım . Hafif jQuery-form eklentisini kullanırsanız, yalnızca yaklaşık beş satır JavaScript kullanır.

Zorluk AJAX yüklemesinin standart olarak çalışmasını sağlamaktır remote_form_for çok parçalı form gönderimini anlamadığı . Rails, AJAX isteğiyle aradığı dosya verilerini göndermeyecek.

JQuery-form eklentisi devreye giriyor.

Bunun için Rails kodu şöyledir:

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

İlişkili JavaScript şöyledir:

$('#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.
  },
 });
});

Ve işte Rails denetleyici eylemi, güzel vanilya:

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

Bunu Bloggity ile son birkaç haftadır kullanıyorum ve şampiyon gibi çalıştı.

Basit Ajax Yükleyici başka bir seçenektir:

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

• Çapraz tarayıcı - IE7 +, Firefox, Chrome, Safari, Opera'da çalışır
• HTML5 olmayan tarayıcılarda bile birden çok eşzamanlı yüklemeyi destekler
• Flash veya harici CSS yok - sadece bir 5Kb Javascript dosyası
• Tam çapraz tarayıcı ilerleme çubukları için isteğe bağlı yerleşik destek (PHP'nin APC uzantısını kullanarak)
• Esnek ve son derece özelleştirilebilir - herhangi bir öğeyi yükleme düğmesi olarak kullanın, kendi ilerleme göstergelerinizi şekillendirin
• Hiçbir form gerekmez, sadece yükleme düğmesi olarak kullanılacak bir öğe sağlayın
• MIT lisansı - ticari projede ücretsiz

Örnek kullanım:

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 daha önce dosyaları yüklemek için kullandığım başka bir iyi eklentidir. JavaScript kodu aşağıdaki kadar basittir: kod. Ancak, yeni sürüm Internet Explorer'da çalışmaz.

$('#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) {
        // ...
    }
});

Çok fazla arama yaptım ve herhangi bir eklenti olmadan ve sadece ajax ile dosya yüklemek için başka bir çözüme geldim. Çözüm aşağıdaki gibidir:

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

İşte dosya yüklemek için başka bir çözüm ( eklenti olmadan) )

Basit Javascripts ve AJAX kullanma (progress-bar ile)

HTML bölümü

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

JS bölümü

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

PHP bölümü

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

İşte EXAMPLE uygulaması

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

Resimler dahil tüm değerlerinizi göndermek için form verilerini kullanabilirsiniz.

Jquery ile senkronize olmayan bir şekilde dosya yüklemek için aşağıdaki adımları kullanın:

adim 1 Projenizde Nuget yöneticisini açın ve paket ekleyin (jquery fileupload (sadece arama kutusuna yazmanız ve yüklemeniz gerekir.)) URL: https://github.com/blueimp/jQuery-File- Yükleme

adim 2 Yukarıdaki paket çalıştırılarak projeye zaten eklenmiş olan HTML dosyalarına aşağıdaki komut dosyalarını ekleyin:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

adim 3 Aşağıdaki kodlara göre dosya yükleme kontrolü yazın:

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

adım 4 aşağıdaki gibi bir js yöntemi yazın

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

        };

adim 5 İşlemi başlatmak için hazır işlev çağrısı öğesi dosyasında aşağıdaki gibi işlemi başlatın:

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

});

adım 6 MVC denetleyicisini ve Eylemini aşağıdaki gibi yazın:

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


        }

    }

Modern bir yaklaşım jQuery olmadan kullanmaktır FileList dan geri almak nesne <input type="file">zaman Kullanıcı seçer bir dosya (lar) ve daha sonra kullanmak Fetch FileList bir sarılı göndermek için FormData nesnesi.

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

Bir demo çalışma ile çözüldü çözüm görebilirsiniz burada önizleme ve sunucuya form dosyaları göndermenize izin verir. Durumunuz için, dosyanın sunucuya yüklenmesini kolaylaştırmak için Ajax'ı kullanmanız gerekir :

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

Gönderilen veriler bir formveridir. JQuery'nizde, form dosyasını aşağıda gösterildiği gibi göndermek için bir düğme tıklaması yerine bir form gönderme işlevi kullanın.

$(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");

     });
   });
});

Daha fazla ayrıntı görüntüle

Örnek: jQuery kullanıyorsanız, bir dosya yüklemek kolaydır. Bu küçük ve güçlü bir jQuery eklentisidir, http://jquery.malsup.com/form/ .

Misal

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

Umarım faydalı olur

Kullanabilirsiniz

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

gösteri

| HTML5'in readAsDataURL () veya bazı base64 kodlayıcısını kullanarak dosyayı base64'e dönüştürün . Burada keman çal

var reader = new FileReader();

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

        reader.readAsBinaryString(file);

Sonra almak için:

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

XMLHttpRequest kullanarak (flash ve iframe bağımlılığı olmadan) eşzamansız yükleme yaparken dosya adı ile birlikte ek parametreler iletebilirsiniz. Ek parametre değerini FormData ile ekleyin ve yükleme isteğini gönderin.

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

Ayrıca, Syncfusion JavaScript UI dosya yüklemesi, yalnızca olay bağımsız değişkenini kullanarak bu senaryo için çözüm sağlar. Eğer belgeleri bulabilirsiniz burada ve bu kontrolü hakkında daha fazla ayrıntı burada bağlantı açıklama girin burada

Arayın uyumsuz bir dosya için yükleme işlemini Taşıma : Burada https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Bağlantıdan örnek

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

Bu benim çözümüm.

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

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

kontrolör

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

HTML5 ve JavaScript kullanarak , zaman uyumsuz yükleme oldukça kolaydır, html'nizle birlikte yükleme mantığını oluşturuyorum, bu API'ye ihtiyaç duyduğundan tam olarak çalışmıyor, ancak /uploadweb sitenizin kökünden çağrılan uç nokta varsa, nasıl çalıştığını gösterin , bu kod sizin için çalışmalıdır:

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>

Ayrıca XMLHttpReques hakkında daha fazla bilgi:

XMLHttpRequest Nesnesi

Tüm modern tarayıcılar XMLHttpRequest nesnesini destekler. XMLHttpRequest nesnesi, sahne arkasında bir web sunucusuyla veri alışverişi yapmak için kullanılabilir. Bu, bir web sayfasının bölümlerini tüm sayfayı yeniden yüklemeden güncellemenin mümkün olduğu anlamına gelir.

XMLHttpRequest Nesnesi Oluşturma

Tüm modern tarayıcılarda (Chrome, Firefox, IE7 +, Edge, Safari, Opera) yerleşik bir XMLHttpRequest nesnesi vardır.

XMLHttpRequest nesnesi oluşturmak için sözdizimi:

değişken = yeni XMLHttpRequest ();

Etki Alanları Arasında Erişim

Güvenlik nedeniyle, modern tarayıcılar etki alanlarına erişime izin vermez.

Bu, hem web sayfasının hem de yüklemeye çalıştığı XML dosyasının aynı sunucuda bulunması gerektiği anlamına gelir.

W3Schools'daki örnekler, W3Schools etki alanında bulunan tüm açık XML dosyalarını açar.

Yukarıdaki örneği kendi web sayfalarınızdan birinde kullanmak istiyorsanız, yüklediğiniz XML dosyalarının kendi sunucunuzda bulunması gerekir.

Daha fazla ayrıntı için burada okumaya devam edebilirsiniz ...

JavaScript ile daha yeni Getirme API'sını kullanabilirsiniz . Bunun gibi:

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

Avantajı: Getirme API'sı tüm modern tarayıcılar tarafından yerel olarak desteklenir , bu nedenle hiçbir şey içe aktarmanıza gerek yoktur. Ayrıca fetch () işlevinin daha sonra .then(..code to handle response..)eşzamansız olarak işlenen bir Promise döndürdüğünü unutmayın .

Herhangi bir eklenti kullanmadan JavaScript veya jQuery ve bunu kullanarak Eşzamansız Birden Çok Dosya yüklemesi yapabilirsiniz. İlerleme kontrolünde dosya yüklemesinin gerçek zamanlı ilerlemesini de gösterebilirsiniz. 2 güzel bağlantıya rastladım -

1. İlerleme Çubuğu ile ASP.NET Web Formları tabanlı Çoklu Dosya Yükleme Özelliği
2. JQuery'de yapılan ASP.NET MVC tabanlı Çoklu Dosya Yükleme

Sunucu tarafı dili C # 'dır, ancak PHP gibi diğer dillerle çalışmasını sağlamak için bazı değişiklikler yapabilirsiniz.

Dosya Yükleme ASP.NET Core MVC:

Html'de dosya oluşturma denetimi oluştur görünümünde:

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

Şimdi kumandanızda eylem yöntemi oluşturun:

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

hostingEnvironment değişkeni, bağımlılık enjeksiyonu kullanılarak denetleyiciye enjekte edilebilen IHostingEnvironment türündedir:

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

PHP için https://developer.hyvor.com/php/image-upload-ajax-php-mysql adresini arayın

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

Ayrıca https://uppy.io gibi bir şey kullanmayı da düşünebilirsiniz .

Sayfadan ayrılmadan dosya yüklemeyi yapar ve sürükle ve bırak, tarayıcı çökmeleri / kesintili ağlar durumunda yüklemelere devam etme ve örneğin Instagram'dan içe aktarma gibi birkaç bonus sunar. Açık kaynak kodludur ve jQuery / React / Angular / Vue'ya güvenmez, ancak onunla birlikte kullanılabilir. Feragatname: yaratıcısı olarak önyargılıyım;)