• 0

كيف أرفعُ ملف بشكل غير متزامن "Asynchronously "؟

أريد رفع ملف على موقع بشكل غير متزامن "asynchronously " باستعمال Jquery وهذا هو ملفي لـ Html:

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

وكود 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: ");
            }
        });
    });
});

عوض عملية رفع الملف أريد الحصول على اسم الملف، مع رفعه بشكل غير متزامن 'في الخفاء'، كيف ذلك؟

تمّ تعديل بواسطة Simoh

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

html5 توفرإمكانية رفع الملفات باستخدام تقنية Ajax ومكتبة Jquery، بل وأكثر من هذا تُمكن من تحديد معاير الملف (name,size...).

كود html:

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

يمكن التأكد من نوع الملف وخصائصه عن طريق ملف javascript:

$(':file').change(function(){
    var file = this.files[0];
    var name = file.name;
    var size = file.size;
    var type = file.type;
    //تأكد من خصائص لملف، حسب المعايير التي تريده
});

تقنية Ajax لإرسال الملف:

$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'upload.php',  //رابط ملف رفع الملف
        type: 'POST',
        xhr: function() {  //  XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // التأكد من وجود خاصية رفع الملفات
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); 
            }
            return myXhr;
        },
        //Ajax  
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        //  dataالبيانات 
        data: formData,
        // في حالة عدم نجاح عملية الرفع
        cache: false,
        contentType: false,
        processData: false
    });
});

التأكد من تقدم رفع الملف حتى الانتهاء:

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

 

تمّ تعديل بواسطة E.Nourddine

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن