SORU
3 EKİM 2008, Cuma


Nasıl dosyaları zaman uyumsuz olarak yükleyebilir miyim?

Zaman uyumsuz olarak jQuery ile dosya upload etmek istiyorum. Bu benim HTML

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Ve burada JavaScript kodum:

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

Dosya karşıya olmak yerine, sadece dosya adını alıyorum. Ben bu sorunu düzeltmek için ne yapabilirim?

Geçerli Çözüm

Dosyaları karşıya yüklemek için jQuery Form Plugin kullanıyorum.

CEVAP
6 Ocak 2012, Cuma


HTML5 Ajax ile yüklenenler dosya ve jQuery YAPABİLİRSİNİZ. Sadece bu da değil, dosya doğrulaması (isim, boyut ve MİME-tipi) veya HTML5 ilerleme etiketi ile ilerleme olayı halledebilirsin (veya dıv). Geçenlerde bir dosya upload yapmak zorunda kaldım, ama ne İframe veya eklentileri Flash kullanmak istemedim ve biraz araştırma yaptıktan 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, eğer isterseniz bazı doğrulama yapabilirsiniz. Dosya değiştiğinde olay örneğin:

$(':file').change(function(){
    var file = this.files[0];
    var name = file.name;
    var size = file.size;
    var type = file.type;
    //Your validation
});

Şimdi Ajax düğmenin tıklama ile gönder:

$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'upload.php',  //Server script to process data
        type: 'POST',
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
});

Şimdi Eğer ilerleme işlemek istiyorum.

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

Gördüğünüz gibi HTML5 (ve bazı araştırmalara) ile dosya yükleme imkansız değil ama çok kolay olur. Örnek HTML5 bileşenlerin bazıları her tarayıcıda mevcut değil Google Chrome ile deneyin.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Ben Vivona

    Ben Vivona

    24 Ocak 2010
  • SelmerSaxMan

    SelmerSaxMan

    24 HAZİRAN 2006
  • The Onion

    The Onion

    14 Mart 2006

İLGİLİ SORU / CEVAPLAR