1659112080

Cách Sử Dụng JavaScript Và PHP Để Tải Lên Nhiều Tệp

Việc thêm nhiều phần tử tệp để tải lên nhiều tệp rất tốn thời gian và bạn cần viết thêm một số mã cho việc này.

Bạn có thể làm điều đó với một phần tử tệp duy nhất bằng cách cho phép chọn nhiều tệp.

Đọc các tệp đã chọn và thêm vào đối tượng FormData để chuyển tới tệp AJAX để tải lên.

Trong hướng dẫn này, tôi chỉ cách bạn có thể tải lên nhiều tệp bằng JavaScript và PHP.

1. HTML

Tạo một tệp và phần tử nút. Để bật nhiều lựa chọn tệp, hãy thêm multiplethuộc tính vào phần tử tệp.

Đã thêm onclicksự kiện vào nút gọi uploadFile()chức năng.

Mã đã hoàn thành

<div >
  <input type="file" name="files" id="files" multiple>
  <input type="button" id="btn_uploadfile" 
     value="Upload" 
     onclick="uploadFile();" >
</div>

2. PHP

Tạo một ajaxfile.phptệp và một uploadsthư mục để lưu trữ tệp.

Đếm tổng số tệp và gán cho $countfiles. Chỉ định vị trí tải lên cho $upload_location.

Tạo countbiến để lưu trữ số lượng tệp đã tải lên thành công.

Lặp lại các tệp. Đọc tên tệp và tạo đường dẫn tệp.

Đọc phần mở rộng tệp và gán phần mở rộng tệp hợp lệ cho $valid_extMảng.

Nếu phần mở rộng tệp tồn tại trong $valid_extMảng thì hãy tải tệp lên và tăng $count1.

Quay trở lại $count.

Mã đã hoàn thành

<?php

// Count total files
$countfiles = count($_FILES['files']['name']);

// Upload directory
$upload_location = "uploads/";

$count = 0;
for($i=0;$i < $countfiles;$i++){

   // File name
   $filename = $_FILES['files']['name'][$i];

   // File path
   $path = $upload_location.$filename;

   // file extension
   $file_extension = pathinfo($path, PATHINFO_EXTENSION);
   $file_extension = strtolower($file_extension);

   // Valid file extensions
   $valid_ext = array("pdf","doc","docx","jpg","png","jpeg");

   // Check extension
   if(in_array($file_extension,$valid_ext)){

      // Upload file
      if(move_uploaded_file($_FILES['files']['tmp_name'][$i],$path)){
        $count += 1;
      } 
   }

}

echo $count;
exit;

3. JavaScript

Tạo uploadFile()chức năng gọi khi nhấp vào nút.

Gán tổng số tệp đã chọn trong totalfilesbiến. Nếu totalfileskhông lớn hơn 0 hơn alert("Please select a file");.

Nếu totalfiles > 0sau đó tạo FormDatađối tượng và vòng lặp trên các tệp đã chọn và nối thêm vào FormDatađối tượng.

Để gửi yêu cầu AJAX, hãy tạo một đối tượng của XMLHttpRequest. Với open() phương thức đặt phương thức yêu cầu "POST" và đường dẫn tệp AJAX.

Xử lý lệnh gọi lại thành công AJAX bằng onreadystatechange() phương thức. Gán this.responseTextcho responsebiến và cảnh báo response.

Truyền formData đối tượng với send() phương thức.

Mã đã hoàn thành

// Upload file
function uploadFile() {

  var totalfiles = document.getElementById('files').files.length;

  if(totalfiles > 0 ){

    var formData = new FormData();

    // Read selected files
    for (var index = 0; index < totalfiles; index++) {
      formData.append("files[]", document.getElementById('files').files[index]);
    }

    var xhttp = new XMLHttpRequest();

    // Set POST method and ajax file path
    xhttp.open("POST", "ajaxfile.php", true);

    // call on request changes state
    xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {

          var response = this.responseText;

          alert(response + " File uploaded.");

       }
    };

    // Send request with data
    xhttp.send(formData);

  }else{
    alert("Please select a file");
  }

}

4. Đầu ra

Xem đầu ra

5. Kết luận

Lặp lại các tệp đã chọn và nối chúng vào đối tượng FormData để gửi nhiều tệp để tải lên.

Nguồn: https://makitweb.com

#php #javascript

Cách Sử Dụng JavaScript Và PHP Để Tải Lên Nhiều Tệp

Việc thêm nhiều phần tử tệp để tải lên nhiều tệp rất tốn thời gian và bạn cần viết thêm một số mã cho việc này.

Bạn có thể làm điều đó với một phần tử tệp duy nhất bằng cách cho phép chọn nhiều tệp.

Đọc các tệp đã chọn và thêm vào đối tượng FormData để chuyển tới tệp AJAX để tải lên.

Trong hướng dẫn này, tôi chỉ cách bạn có thể tải lên nhiều tệp bằng JavaScript và PHP.

1. HTML

Tạo một tệp và phần tử nút. Để bật nhiều lựa chọn tệp, hãy thêm multiplethuộc tính vào phần tử tệp.

Đã thêm onclicksự kiện vào nút gọi uploadFile()chức năng.

Mã đã hoàn thành

<div >
  <input type="file" name="files" id="files" multiple>
  <input type="button" id="btn_uploadfile" 
     value="Upload" 
     onclick="uploadFile();" >
</div>

2. PHP

Tạo một ajaxfile.phptệp và một uploadsthư mục để lưu trữ tệp.

Đếm tổng số tệp và gán cho $countfiles. Chỉ định vị trí tải lên cho $upload_location.

Tạo countbiến để lưu trữ số lượng tệp đã tải lên thành công.

Lặp lại các tệp. Đọc tên tệp và tạo đường dẫn tệp.

Đọc phần mở rộng tệp và gán phần mở rộng tệp hợp lệ cho $valid_extMảng.

Nếu phần mở rộng tệp tồn tại trong $valid_extMảng thì hãy tải tệp lên và tăng $count1.

Quay trở lại $count.

Mã đã hoàn thành

<?php

// Count total files
$countfiles = count($_FILES['files']['name']);

// Upload directory
$upload_location = "uploads/";

$count = 0;
for($i=0;$i < $countfiles;$i++){

   // File name
   $filename = $_FILES['files']['name'][$i];

   // File path
   $path = $upload_location.$filename;

   // file extension
   $file_extension = pathinfo($path, PATHINFO_EXTENSION);
   $file_extension = strtolower($file_extension);

   // Valid file extensions
   $valid_ext = array("pdf","doc","docx","jpg","png","jpeg");

   // Check extension
   if(in_array($file_extension,$valid_ext)){

      // Upload file
      if(move_uploaded_file($_FILES['files']['tmp_name'][$i],$path)){
        $count += 1;
      } 
   }

}

echo $count;
exit;

3. JavaScript

Tạo uploadFile()chức năng gọi khi nhấp vào nút.

Gán tổng số tệp đã chọn trong totalfilesbiến. Nếu totalfileskhông lớn hơn 0 hơn alert("Please select a file");.

Nếu totalfiles > 0sau đó tạo FormDatađối tượng và vòng lặp trên các tệp đã chọn và nối thêm vào FormDatađối tượng.

Để gửi yêu cầu AJAX, hãy tạo một đối tượng của XMLHttpRequest. Với open() phương thức đặt phương thức yêu cầu "POST" và đường dẫn tệp AJAX.

Xử lý lệnh gọi lại thành công AJAX bằng onreadystatechange() phương thức. Gán this.responseTextcho responsebiến và cảnh báo response.

Truyền formData đối tượng với send() phương thức.

Mã đã hoàn thành

// Upload file
function uploadFile() {

  var totalfiles = document.getElementById('files').files.length;

  if(totalfiles > 0 ){

    var formData = new FormData();

    // Read selected files
    for (var index = 0; index < totalfiles; index++) {
      formData.append("files[]", document.getElementById('files').files[index]);
    }

    var xhttp = new XMLHttpRequest();

    // Set POST method and ajax file path
    xhttp.open("POST", "ajaxfile.php", true);

    // call on request changes state
    xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {

          var response = this.responseText;

          alert(response + " File uploaded.");

       }
    };

    // Send request with data
    xhttp.send(formData);

  }else{
    alert("Please select a file");
  }

}

4. Đầu ra

Xem đầu ra

5. Kết luận

Lặp lại các tệp đã chọn và nối chúng vào đối tượng FormData để gửi nhiều tệp để tải lên.

Nguồn: https://makitweb.com

#php #javascript

Duyen Hoang

1658484120

Cách Sử Dụng Vue.js Và PHP Để Tải Lên Nhiều Tệp

Thay vì thêm nhiều phần tử tệp, bạn có thể sử dụng một phần tử tệp duy nhất để cho phép người dùng tải lên nhiều tệp.

Sử dụng đối tượng FormData để chuyển các tệp đã chọn sang PHP để tải lên.

Trong hướng dẫn này, tôi chỉ cách bạn có thể tải lên nhiều tệp bằng Vue.js và PHP.

1. Tải xuống & Bao gồm

Tải xuống gói Axios từ GitHub . hoặc bạn cũng có thể sử dụng CDN (https://unpkg.com/axios/dist/axios.min.js).
Bây giờ, bao gồm axios.min.js với vue.js.

<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2. HTML

Tạo <div id='myapp'>. Trong <div >phần tử tạo tệp và nút. Thêm refthuộc tính trong phần tử tệp được sử dụng để truy cập tệp trong Vue.

Xác định @click='uploadFile()'sự kiện trên nút.

Hiển thị tên tệp đã tải lên trong <ul> <li>.

Mã đã hoàn thành

<div id='myapp'>

   <input type="file" id="uploadfiles" ref="uploadfiles" multiple />

   <button type="button" @click='uploadFile()' >Upload file</button>

   <br>

   <!-- Files names -->
   <div v-if="filenames.length" >
     <ul > 
       <li v-for= '(filename,index) in filenames' > 
       {{ filename }} 
       </li> 
     </ul>
   </div> 
</div>

3. PHP

Tạo ajaxfile.phptệp và uploadsthư mục để lưu trữ tệp.

Tạo $files_arrđể lưu trữ tên tệp đã tải lên.

Gán tổng số tệp cho $countfilesbiến và chỉ định vị trí tải lên cho $upload_locationbiến.

Lặp lại các tệp.

Gán tên tệp cho $filenamevà phần mở rộng tệp cho $extbiến.

Khởi tạo $valid_extMảng với phần mở rộng tệp tải lên hợp lệ. Nếu phần mở rộng tệp tồn tại trong $valid_extMảng thì hãy gán tên tệp mới $newfilenamevà đường dẫn tệp đến $pathbiến.

Nếu tệp được tải lên thành công thì hãy khởi tạo $files_arrMảng với $newfilename.

Trả về $files_arrMảng ở định dạng JSON.

Mã đã hoàn thành

<?php

// To store uploaded files path
$files_arr = array();

if(isset($_FILES['files']['name'])){

   // Count total files
   $countfiles = count($_FILES['files']['name']);

   // Upload directory
   $upload_location = "uploads/";

   // Loop all files
   for($index = 0;$index < $countfiles;$index++){

      if(isset($_FILES['files']['name'][$index]) && $_FILES['files']['name'][$index] != ''){
          // File name
          $filename = $_FILES['files']['name'][$index];

          // Get extension
          $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));

          // Valid extensions
          $valid_ext = array("png","jpeg","jpg","pdf","txt","doc","docx");

          // Check extension
          if(in_array($ext, $valid_ext)){

             // File path
             $newfilename = time()."_".$filename;
             $path = $upload_location.$newfilename;

             // Upload file
             if(move_uploaded_file($_FILES['files']['tmp_name'][$index],$path)){
                $files_arr[] = $newfilename;
             }
          }

      }

   }

}

echo json_encode($files_arr);
die;

4. Tập lệnh

Khởi tạo Vue trên #myapp.

Thêm filenamebiến dữ liệu để lưu trữ tên tệp đã tải lên thành công.

Xác định uploadFile()phương thức được gọi khi nhấp vào nút tải lên.

Tạo đối tượng FormData. Lặp lại các tệp đã chọn và nối vào formData đối tượng.

formData.append("files[]", files[index]);

LƯU Ý - Truy cập tệp bằng $_FILES['files']tệp PHP.

Gửi yêu cầu AJAX tới 'ajaxfile.php', chuyển formDatađối tượng dưới dạng dữ liệu.

Khi gọi lại thành công, gán response.datacho filenamesvà cảnh báo số lượng tệp đã tải lên.

Mã đã hoàn thành

var app = new Vue({
  el: '#myapp',
  data: {
    filenames: []
  },
  methods: {

    uploadFile: function(){

       var el = this;

       let formData = new FormData();

       // Read selected files
       var files = this.$refs.uploadfiles.files;
       var totalfiles = this.$refs.uploadfiles.files.length;
       for (var index = 0; index < totalfiles; index++) {
          formData.append("files[]", files[index]);
       }

       axios.post('ajaxfile.php', formData,
       {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
       })
       .then(function (response) {

          el.filenames = response.data;

          alert(el.filenames.length + " files is been uploaded.");

       })
       .catch(function (error) {
          console.log(error);
       }); 

    }
  }
})

5. Kết luận

Nếu bạn muốn truyền thêm dữ liệu với phiên bản tệp thì hãy nối giá trị trong đối tượng FormData.

formData.append("username", "yssyogesh");

Trong PHP, đọc giá trị được truyền bằng phương thức POST.

Trong ví dụ, tôi chỉ thêm xác thực phần mở rộng tệp. Trong khi thực hiện trong dự án của bạn, hãy thêm và cập nhật xác thực theo yêu cầu của bạn.

Nguồn: https://makitweb.com

#php #vuejs

Duyen Hoang

1659401460

Cách Tải Lên Tệp Bằng JavaScript AJAX Và PHP

Tải lên tệp là một yêu cầu cơ bản trong một trang web. Nó được thực hiện bằng cách sử dụng một tập lệnh phía máy chủ.

Yêu cầu tải lại trang sau khi gửi biểu mẫu để thực thi tập lệnh.

Với tập lệnh phía máy khách AJAX tương tác với tập lệnh phía máy chủ và thực hiện hành động mà không cần tải lại trang.

Trong hướng dẫn này, tôi chỉ cách bạn có thể tải lên tệp bằng JavaScript AJAX và PHP.

1. HTML

Tạo một tệp và phần tử nút. Đã thêm onclicksự kiện vào nút gọi uploadFile()chức năng.

Mã đã hoàn thành

<div >
  <input type="file" name="file" id="file">
  <input type="button" id="btn_uploadfile" 
     value="Upload" 
     onclick="uploadFile();" >
</div>

2. PHP

Tạo một ajaxfile.phptệp và một uploadthư mục để lưu trữ tệp.

Kiểm tra xem $_FILESMảng đã được đặt hay chưa. Nếu được đặt thì gán $_FILES['file']['name']cho $filename, tên tệp với vị trí tải lên trong $locationbiến.

Nhận phần mở rộng tệp và chỉ định phần mở rộng tệp hợp lệ trong $valid_extMảng.

Kiểm tra xem phần mở rộng tệp có tồn tại trong $valid_extMảng hay không. Nếu tồn tại, hãy tải tệp lên và gán 1 cho $responsenếu đã tải lên thành công.

Quay trở lại $response.

Mã đã hoàn thành

<?php

if(isset($_FILES['file']['name'])){
   // file name
   $filename = $_FILES['file']['name'];

   // Location
   $location = 'upload/'.$filename;

   // file extension
   $file_extension = pathinfo($location, PATHINFO_EXTENSION);
   $file_extension = strtolower($file_extension);

   // Valid extensions
   $valid_ext = array("pdf","doc","docx","jpg","png","jpeg");

   $response = 0;
   if(in_array($file_extension,$valid_ext)){
      // Upload file
      if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
         $response = 1;
      } 
   }

   echo $response;
   exit;
}

3. JavaScript

Tạo uploadFile()chức năng gọi khi nhấp vào nút Tải lên.

Đọc filesmột filephần tử. Nếu một tệp được chọn thì hãy tạo một đối tượng FormDatakhác, thông báo cảnh báo "Please select a file".

Nối files[0]vào 'file'chìa khóa formData.

Để gửi yêu cầu AJAX, hãy tạo một đối tượng của XMLHttpRequest. Với open()phương thức đặt phương thức yêu cầu "POST"và đường dẫn tệp AJAX.

Xử lý lệnh gọi lại thành công AJAX bằng onreadystatechange()phương thức. Gán this.responseTexttrong responsebiến. Nếu response == 1sau đó thông báo cảnh báo "Upload successfully."nếu không, thông báo cảnh báo "File not uploaded.".

Truyền formDatađối tượng với send()phương thức.

Mã đã hoàn thành

// Upload file
function uploadFile() {

   var files = document.getElementById("file").files;

   if(files.length > 0 ){

      var formData = new FormData();
      formData.append("file", files[0]);

      var xhttp = new XMLHttpRequest();

      // Set POST method and ajax file path
      xhttp.open("POST", "ajaxfile.php", true);

      // call on request changes state
      xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {

           var response = this.responseText;
           if(response == 1){
              alert("Upload successfully.");
           }else{
              alert("File not uploaded.");
           }
         }
      };

      // Send request with data
      xhttp.send(formData);

   }else{
      alert("Please select a file");
   }

}

4. Đầu ra

Xem đầu ra

5. Kết luận

Gửi cá thể tệp bằng cách sử dụng đối tượng FormData và trong tệp AJAX truy cập nó bằng cách sử dụng Mảng $ _FILES.

Nguồn: https://makitweb.com

#php #javascript #ajax

Annetta Robel

1599461220

PHP json_decode Example | Decode JSON Data in PHP Tutorial

PHP json_decode is an inbuilt function that takes the JSON encoded string and converts it into a PHP variable. JSON stands for JavaScript Object Notation. JSON is the standard lightweight data-interchange format which is quick and easy to parse and generate. The JSON, like XML, is the text-based format that’s easy to write and easy to understand for both computers and humans, but unlike the XML, JSON data structures occupy less bandwidth than their XML versions.

PHP json_decode Example

In JSON, keys are always strings, while a value can be a string, number, true or false, null or even the object or an array. Strings must be enclosed in the double quotes** “** and can contain escape characters such as \n, **\t, **and ****.

JSON data structures are very similar to the PHP arrays. PHP programming language has built-in functions to encode and decode the JSON data. The most common JSON PHP functions are json_encode and json_decode, respectively. Both functions only work with UTF-8 encoded string data.

Decoding JSON data is as simple as encoding it. You can use a PHP json_decode() function to convert a JSON encoded string into the appropriate PHP data type. We will see how to decode or convert a JSON object to a PHP object.

#php #php json_decode #javascript #xml #json php #php programming

hourly developer

1597820991

Hire PHP Developer

Looking to develop a PHP based website from scratch or revamp your existing website?

HourlyDeveloper.io has always been an industry leader for companies and business owners looking to hire PHP web developer. By choosing to Hire PHP Developer from our company, you can always expect the best results. Our PHP services and solutions are always flexible which means that no matter the nature of your project, you can always count on us for getting the best PHP expertise.

Consult with our experts: https://bit.ly/3aEGxPy

#hire php developer #php developer #php development company #php development services #php development #php

Cách Sử Dụng JavaScript Và PHP Để Tải Lên Nhiều Tệp

1. HTML

2. PHP

3. JavaScript

4. Đầu ra

5. Kết luận

What is GEEK

Buddha Community

Cách Sử Dụng JavaScript Và PHP Để Tải Lên Nhiều Tệp

1. HTML

2. PHP

3. JavaScript

4. Đầu ra

5. Kết luận

Cách Sử Dụng Vue.js Và PHP Để Tải Lên Nhiều Tệp

1. Tải xuống & Bao gồm

2. HTML

3. PHP

4. Tập lệnh

5. Kết luận

Cách Tải Lên Tệp Bằng JavaScript AJAX Và PHP

1. HTML

2. PHP

3. JavaScript

4. Đầu ra

5. Kết luận

PHP json_decode Example | Decode JSON Data in PHP Tutorial

PHP json_decode Example

Hire PHP Developer