بارگذاری فایل با استفاده از jQuery Ajax

mohsen•4 ماه قبل
ارسال شده در
javascript

با استفاده از jQuery، می‌توان فایل‌ها را با ارسال درخواست Ajax و متد POST بارگذاری کرد. برای انجام این کار، نیاز است تا از شی FormData استفاده کنید. در مرورگرهای قدیمی روش بارگذاری فایل بوسیله iframe انجام می شد، که زمان زیادی از منسوخ شدن این روش می گذرد.

مراحل بارگذاری

1. استفاده از FormData برای آپلود فایل

ابتدا، یک شی FormData را ایجاد کرده و فایل را به آن اضافه می‌کنید. برای مثال:

      var formData = new FormData();
formData.append('file', $('#file')[0].files[0]); // 'file' نام فیلدی است که در سرور انتظار می‌رود

2. ارسال فایل با jQuery Ajax

سپس، می‌توانید درخواست Ajax را به شکل زیر ارسال کنید:

      $.ajax({
    type: "POST",
    url: 'upload.php',  // به URL سرور خود اشاره کنید
    data: formData,
    processData: false,  // jQuery به پردازش داده‌ها نپردازد
    contentType: false,  // jQuery نوع محتوا را تنظیم نکند
    success: function(response) {
        console.log(response);
        alert('Successful upload: ' + response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Upload failed: ', textStatus, errorThrown);
    }
});

3. نمایش پیشرفت آپلود

برای نمایش پیشرفت آپلود می توانید از رویداد progress شی XMLHttpRequest به صورت زیر استفاده کنید:

      function progressHandling(event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
}
$.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', progressHandling, false);
            }
            return myXhr;
        },
 })

المان های HTML مورد نیاز برای نمایش پیشرفت

      <input type="file" id="file">
<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

نمونه CSS برای مشخص کردن استابل نمایش پیشرفت آپلود را به نمایش بگذارید:

      #progress-wrp {
    border: 1px solid #0099CC;
    padding: 1px;
    position: relative;
    height: 30px;
    border-radius: 3px;
    background: #fff;
}
#progress-wrp .progress-bar {
    height: 100%;
    border-radius: 3px;
    background-color: #f39ac7;
    width: 0;
}
#progress-wrp .status {
    position: absolute;
    display: inline-block;
    color: #000000;
}
رای
0
ارسال نظر
مرتب سازی:
اولین نفری باشید که نظر می دهید!