สร้างหน้าอัปโหลดไฟล์ด้วย jQuery UI

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

สร้างหน้าอัปโหลดไฟล์ด้วย jQuery UI

โพสต์โดย Ik Kat » 29/06/2017 3:33 pm

jQuery File Upload เป็นส่วนขยายเพิ่มเติมที่ใช้ในการอัปโหลดไฟล์ ถูกพัฒนาขึ้นด้วย jQuery UI สามารถรองรับ Platform ที่หลากหลาย เช่น Google App Engine, PHP, Python, Ruby on Rails และ Java

ข้อดี
1. สามารถรองรับ Browsers ได้อย่างหลากหลาย
Desktop :
- Google Chrome
- Apple Safari 4.0+
- Mozilla Firefox 3.0+
- Opera 11.0+
- Microsoft Internet Explorer 6.0+
Mobile:
- Apple Safari on iOS 6.0+
- Google Chrome on iOS 6.0+
- Google Chrome on Android 4.0+
- Default Browser on Android 2.3+
- Opera Mobile 12.0+

2. สามารถอัปโหลดได้ทีละหลายไฟล์
3. สามารถลากและวางได้
4. สามารถแสดงภาพตัวอย่างเสียงและวิดีโอได้

MT19 29-6-60(41).png
MT19 29-6-60(41).png (3.86 KiB) เปิดดู 11 ครั้ง

MT19 29-6-60(42).png
MT19 29-6-60(42).png (4.15 KiB) เปิดดู 11 ครั้ง

MT19 29-6-60(43).png
MT19 29-6-60(43).png (3.68 KiB) เปิดดู 11 ครั้ง

index.html :

โค้ด: เลือกทั้งหมด

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body>
</html>

API :

โค้ด: เลือกทั้งหมด

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
});

โค้ด: เลือกทั้งหมด

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

โค้ด: เลือกทั้งหมด

.bar {
    height: 18px;
    background: green;
}

jquery.ajax :

โค้ด: เลือกทั้งหมด

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

Button click :

โค้ด: เลือกทั้งหมด

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});


สามารถดาวน์โหลดได้ที่ : https://github.com/blueimp/jQuery-File-Upload

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 7 และ บุคคลทั่วไป 0 ท่าน