/ / Javascript & Jquery, Php cơ bản / Comment (1)

Upload nhiều file bằng Ajax kết hợp Progress Bar

Upload file là chức năng rất quan trong mà hầu như website nào cũng cần tới,trong những bài hướng dẫn trước mình đã hướng dẫn cách upload file trong php,trong bài này mình sẽ hướng dẫn các bạn upload nhiều file bằng Ajax kết hợp Progress Bar sử dụng thư viện ajaxForm
– Trước tiên các bạn vào đây để tải thư viện ajaxForm về để sử dụng

Upload nhiều file bằng Ajax kết hợp Progress Bar

– Sau khi tải thư viện ajaxForm về chúng ta sẽ include vào website:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.form.js"></script>   

– Xây dựng form upload:

  <form id="form_upload_ajax" method="post" action="upload.php" enctype="multipart/form-data">
    <input type="file" name="img[]" multiple/>
    <input type="submit" value="Upload" id="upload"/>
  </form>
  
  <div id="progress">
    <div id="progressbar"></div>
    <div id="percent">0%</div>
  </div>
  
  <div id="result">
  </div>

Trong form upload này các bạn cần chú ý tới 2 yếu tố đó là form phải có thuộc tính enctype="multipart/form-data" và để upload nhiều file các bạn thêm thuộc tính multiple và dấu [] và sau tên file (img[])
– và thêm 1 chút css cho thêm phần sinh động

  <style>
    #form_upload_ajax { padding: 10px; background: #A5CCFF; border-radius: 5px;}
    #progress { border: 1px solid #ccc; width: 500px; height: 20px; margin-top: 10px;text-align: center;position: relative;}
    #progressbar { background: #F39A3A; height: 20px; width: 0px;}
    #percent { position: absolute; left: 50%; top: 0px;}
  </style>

– Và kết quả chúng ta sẽ có form upload như sau:

Upload nhiều file sử dụng ajax và Progress

Upload nhiều file sử dụng ajax và Progress

– Tiếp theo chúng ta sẽ thực hiện viết code ajax upload của lugin ajaxForm:

<script>
  var progressbar = $('#progressbar');
  var percent = $('#percent');
  var result = $('#result');
  var percentValue = "0%";
  
  $('#form_upload_ajax').ajaxForm({
      // Do something before uploading
      beforeUpload: function() {
        result.empty();
        percentValue = "0%";
        progressbar.width = percentValue;
        percent.html(percentValue);
      },
      
      // Do somthing while uploading
      uploadProgress: function(event, position, total, percentComplete) {
        var percentValue = percentComplete + '%';
        progressbar.width(percentValue)
        percent.html(percentValue);
      },
      
      // Do something while uploading file finish
      success: function() {
        var percentValue = '100%';
        progressbar.width(percentValue)
        percent.html(percentValue);
      },
      
      // Add response text to div #result when uploading complete
      complete: function(xhr) {      
        $('#result').html(xhr.responseText);
      }
  });
</script>

– Công việc cuối cùng của chúng ta là viết code php xử lý việc upload nhiều file,file upload.php với nội dung:

<?php
//lưu biến môi trường khi thực hiện upload
$file  = $_FILES['img'];
$count = count($file['name']);//lấy tổng số file được upload
for($i=0; $i<=$count-1; $i++) {

     move_uploaded_file($_FILES['img']['tmp_name'][$i],"upload/".$_FILES['img']['name'][$i]);
     $url  = "upload/".$_FILES['img']['name'][$i];
     echo "<img src='".$url."' /><br/>";
}
?>

– Và kết quả demo sẽ như sau:

Upload nhiều file sử dụng ajax và Progress

Upload nhiều file sử dụng ajax và Progress

Tải mã nguồn bài viết tại đây: http://ouo.io/8zcSV



08/05/2015
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

Bài viết chùng chuyên mục

One comment

  1. Nguyễn Đức Hà says:
     /  Reply

    Chào bạn !

    Mình đang đọc các bài viết về CSS, Jquery trên website của bạn. Hiện mình đang muốn viết 1 cái minigame: So sánh cao thấp giữa 2 hình. Mình có 8 folder ảnh, mỗi folder chứa 2 ảnh (ví dụ: cột đèn cao và cột đèn thấp). Việc mình phải làm là chọn RANDOM 1 folder trong 8 cái folder trên và hiển thị 2 hình ảnh trong folder đc chọn vào 1 thẻ DIV trong file HTML, mỗi khi load lại trang web thì lại hiển thị 2 ảnh trong 1 folder bất kỳ nào đó. Mình đã đọc bài về hàm random() của bạn, nhưng mình chỉ làm đc việc chọn random 1 ảnh trong số ảnh thôi chứ chọn nhiều ảnh trong 1 folder random thì mình ko làm nổi.
    Mong nhận đc sự trợ giúp của bạn sớm, cảm ơn bạn rất nhiều !
    (nếu bạn hồi âm nhờ bạn hồi âm vào email: hanguyen.vt83@gmail.com giúp mình)

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL