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.

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.