Hướng dẫn how do you upload a file and save it on html? - Làm thế nào để bạn tải lên một tệp và lưu nó trên html?

Question

Nếu bạn đang phát triển một trang web tốt đẹp như Facebook hoặc YouTube nơi người đăng ký chia sẻ hình ảnh và video hoặc bạn có thể bán nội dung cao cấp như sách điện tử trực tuyến, bạn phải cung cấp một cách để người dùng tải lên nội dung. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thêm khả năng tải lên tệp vào trang web của bạn như một pro.

Nội dung chính Show

Phần tử đầu vào tệp HTML5
Mã phía máy khách
Thêm phần tử đầu vào của loại ‘tệp.
Xử lý tải lên tệp ở phía máy chủ
Tập lệnh PHP hoàn chỉnh cho đến nay (UploadFiles.php)
Ghi chú về việc thiết lập máy chủ web để tải lên tệp thành công
Làm cách nào để tải tệp lên HTML?
Làm thế nào để bạn tạo một tài liệu HTML và lưu nó?
Làm cách nào để tải các tệp kéo và thả lên HTML?
Tải lên tệp HTML hoạt động như thế nào?

Tiêu chuẩn W3C HTML xác định một số loại được thiết kế để xử lý một loại dữ liệu cụ thể. Đối với mục đích tải lên tệp, phần tử đầu vào HTML, một thẻ có tên, đã được cung cấp. Làm thế nào nó hoạt động? Hãy để lặn thẳng vào hướng dẫn để tìm hiểu.

Phần tử đầu vào tệp HTML5

Phần tử tệp được tạo bằng cách sử dụng tệp = Tệp đầu vào như hiển thị bên dưới. Ví dụ đầu tiên tạo ra một hộp tải lên tệp duy nhất trong khi ví dụ thứ hai tạo trường tải lên nhiều tệp.

<p>
<label for="profile_pic">Profile Pic: </label>
<input multiple id="profile_pic" name="profile_pic" type="file">
</p>

<p>
<label for="pictures_upload">Pictures: </label>
<input multiple id="pictures_upload" name="pictures[]" type="file">
</p>

Tạo một biểu mẫu tải lên tệp hoạt động liên quan đến nhiều hơn là chỉ thêm phần tử đầu vào. Đọc chi tiết bên dưới

Mã phía máy khách

Bắn lên chương trình chỉnh sửa văn bản yêu thích của bạn, trong trường hợp của tôi, tôi sẽ sử dụng Notepad. Thêm mã này:

<!DOCTYPE html>
<html lang="en">

<head>
	<Title>File Upload Tutorial</Title>
</head>

<body>
	<!--Content will go inside here.-->
</body>

</html>

Dòng chứa là một nhận xét để làm cho mã của chúng tôi dễ đọc hơn và sẽ không được hiển thị cho người dùng.

Tiếp theo, thêm một phần tử biểu mẫu giữa các thẻ.

<form action="uploadfiles.php" method="post" enctype="multipart/form-data">

<!--Content will go inside here.-->

<input type="submit" value="Upload Now">

</form>

Thuộc tính hành động chỉ định tập lệnh trên máy chủ xử lý việc gửi biểu mẫu.

Note:

Đối với một biểu mẫu có tải lên tệp, bạn phải có thuộc tính của Enctype của mẫu của biểu mẫu được đặt thành Multipart/Form dữ liệu.
Tương tự, thuộc tính ‘phương thức của biểu mẫu phải là bài đăng trên mạng nếu biểu mẫu có tải lên tệp.

Thêm phần tử đầu vào của loại ‘tệp.

Phần tử phải có một thuộc tính tên của tên.

   
<input name="profile_picture" type="file">

Có một vài thuộc tính đáng chú ý của yếu tố.

Theo mặc định, phần tử chỉ cho phép tải lên 1 tệp. Nếu bạn muốn bật người dùng tải lên nhiều hơn một tệp, bạn cần phải thực hiện 2 điều:

Thêm một thuộc tính ‘nhiều người vào phần tử.
Thêm dấu ngoặc vuông mở và đóng trên thuộc tính tên của tên.

Example:

<input multiple name="pictures[]" type="file">

Tuy nhiên, đối với hướng dẫn này, chúng tôi sẽ tiến hành tải lên một tệp duy nhất. Lưu tệp với một tên thích hợp như UploadFiles.php trên máy chủ web của bạn và giữ cho nó mở. Tệp sẽ trông như thế này cho đến nay:

<!DOCTYPE html>
<html lang="en">

<head>
	<title>File Upload Tutorial</title>
</head>

<body>
	<!--Content will go inside here.-->
	<form target="uploadfiles.php" method="post" enctype="multipart/form-data">
		<!--Content will go inside here.-->
		<input name="file1" type="file">
		<input type="submit" value="Upload Now">
	</form>
</body>

</html>

Trang web này hoàn thành công việc của chúng tôi về phía khách hàng. Bây giờ, hãy để phát triển mã phía máy chủ.

Xử lý tải lên tệp ở phía máy chủ

Khi người dùng nhấp vào nút Tải lên ngay bây giờ, trình duyệt sẽ đăng dữ liệu biểu mẫu cùng với nội dung tệp vào tập lệnh được đề cập trong thuộc tính hành động (UploadFiles.php), tập lệnh sau đó thu thập tệp và lưu trên máy chủ.uploadfiles.php) The script then collects the file and saves on the server.

Tạo một thư mục có tên là Tải lên trên máy chủ web của bạn ở cùng một mức đường dẫn với tệp uploadfiles.php. Đây là nơi chúng tôi sẽ lưu các tệp đã tải lên.
Bây giờ chúng tôi phải thêm mã PHP sau để xử lý tải lên. Đầu tiên, chúng tôi kiểm tra xem biểu mẫu có được đăng và sau đó kiểm tra xem tệp có được tải lên thành công không.

if ($_SERVER['REQUEST_METHOD'] == 'POST') 
{
  if (is_uploaded_file($_FILES['profile_picture']['tmp_name']) ) 
  {

      //save the file

  }
}

Bây giờ, di chuyển tệp được tải lên lên phần phụ tải lên bằng cách sử dụng hàm move_uploaded_file ().



if (move_uploaded_file($_FILES['file1']['tmp_name'], $dest)) 
{
   echo 'File Has Been Uploaded !';
}

Tập lệnh PHP hoàn chỉnh cho đến nay (UploadFiles.php)

<html lang="en">
<head>
<Title>File Upload Tutorial</Title>
</head>
<body>
 
	<form action="uploadfiles.php" method="post" enctype="multipart/form-data">
	<p>
	<label for="my_upload">Select the file to upload:</label>
	<input id="my_upload" name="my_upload" type="file">
	</p>
	<input type="submit" value="Upload Now">
	</form>
</body>
</html>
<?php 
if ($_SERVER['REQUEST_METHOD'] == 'POST') 
{
  if (is_uploaded_file($_FILES['my_upload']['tmp_name'])) 
  { 
  	//First, Validate the file name
  	if(empty($_FILES['my_upload']['name']))
  	{
  		echo " File name is empty! ";
  		exit;
  	}

  	$upload_file_name = $_FILES['my_upload']['name'];
  	//Too long file name?
  	if(strlen ($upload_file_name)>100)
  	{
  		echo " too long file name ";
  		exit;
  	}

  	//replace any non-alpha-numeric cracters in th file name
  	$upload_file_name = preg_replace("/[^A-Za-z0-9 \.\-_]/", '', $upload_file_name);

  	//set a limit to the file upload size
  	if ($_FILES['my_upload']['size'] > 1000000) 
  	{
		echo " too big file ";
  		exit;        
    }

    //Save the file
    $dest=__DIR__.'/uploads/'.$upload_file_name;
    if (move_uploaded_file($_FILES['my_upload']['tmp_name'], $dest)) 
    {
    	echo 'File Has Been Uploaded !';
    }
  }
}

Nếu bạn tải tập lệnh PHP này lên trang web của mình, bạn sẽ có thể tải lên các tệp thông qua biểu mẫu.

Ghi chú về việc thiết lập máy chủ web để tải lên tệp thành công

Có một số tham số cấu hình có thể ảnh hưởng đến tải lên tệp. Các tham số cấu hình này phải được thiết lập đúng cho các tải lên tệp hoạt động tốt.

Thư mục trong đó các tệp được lưu phải được ghi bằng tập lệnh. Điều này là hiển nhiên nhưng có thể bị bỏ qua. Thư mục phải được ghi bởi tập lệnh có nghĩa là người dùng máy chủ web (thường là www-data) nên có quyền truy cập ghi vào thư mục. Vì vậy, thiết lập quyền thư mục đúng. Nếu bạn có quyền truy cập shell, các quyền thư mục có thể được cập nhật bằng lệnh ‘Chmod, một cách dễ dàng. Nếu bạn không có quyền truy cập shell hoặc nếu bạn có tài khoản lưu trữ chung, việc cập nhật quyền thư mục có thể là một chút khó khăn. Xem nếu bảng điều khiển lưu trữ của bạn có tính năng này.
Cấu hình WebSever Máy chủ web sẽ có cài đặt cấu hình (1) cho phép/loại bỏ các tải lên tệp (2) đặt giới hạn về kích thước của tải lên tệp. Dưới đây là các cài đặt điển hình bạn phải kiểm tra (cho PHP)

memory_limit
upload_max_filesize
post_max_size

Xem thêm:

Tạo biểu mẫu liên hệ với hỗ trợ tải lên tệp
Mẫu email PHP với hỗ trợ tệp đính kèm tệp

Làm cách nào để tải tệp lên HTML?

HTML cho phép bạn thêm chức năng tải lên tệp vào trang web của mình bằng cách thêm nút tải lên tệp vào trang web của bạn với sự trợ giúp của thẻ. Xác định một trường chọn tệp và nút duyệt web cho các tải lên tệp.adding a file upload button to your webpage with the help of the tag. The defines a file-select field and a “Browse“ button for file uploads.

Làm thế nào để bạn tạo một tài liệu HTML và lưu nó?

Biên tập viên HTML..

Bước 1: Mở Notepad (PC) Windows 8 trở lên: ....

Bước 1: Mở Textedit (Mac) Mở Finder> Ứng dụng> Textedit. ....

Bước 2: Viết một số HTML. Viết hoặc sao chép mã HTML sau vào Notepad: ....

Bước 3: Lưu trang HTML. Lưu tệp trên máy tính của bạn. ....

Bước 4: Xem trang HTML trong trình duyệt của bạn ..

Làm cách nào để tải các tệp kéo và thả lên HTML?

Khi bạn kéo bất kỳ tệp hình ảnh nào qua khu vực kéo, đường viền của container cũng đã thay đổi thành rắn và văn bản "kéo & thả thành tệp tải lên" cũng đã thay đổi thành "Phát hành để tải lên tệp".Khi bạn phát hành tệp hình ảnh của mình trong khu vực kéo, ngay lập tức, bản xem trước của hình ảnh đó sẽ xuất hiện.. When you release your image file in the drag area, immediately the preview of that image will appear.

Tải lên tệp HTML hoạt động như thế nào?

Tải lên một tệp trong các tài liệu HTML dễ dàng được thực hiện bằng cách sử dụng phần tử đầu vào HTML và bao gồm thuộc tính loại có giá trị cụ thể.Điều này tạo ra tải lên biểu mẫu HTML cơ bản nhưng bạn phải bao gồm các cú pháp CSS và JavaScript cụ thể để viết giao diện người dùng đầy đủ chức năng cho trang web của bạn.using the HTML input element and including the type attribute with a specific value. This creates the basic HTML form upload but you have to include specific CSS and JavaScript syntaxes to write a fully-functional user interface for your web page.