Trong ba bài viết tiếp theo, tôi sẽ chỉ cho bạn cách tạo ứng dụng Drop & Upload bằng Javascript gốc. Mục tiêu của các bài viết này là giúp bạn làm quen với FileReader API và React theo cú pháp của ES2015. Mỗi bước của bài viết bao gồm

• Bước 1. Kéo và thả bằng FileReader trong Javascript gốc
  Trước khi chúng ta đi sâu vào xây dựng ứng dụng React, trước tiên hãy cho chúng tôi hiểu cách thức hoạt động của API kéo và thả cơ bản.
• Bước 2. Lưu tệp trên máy chủ với Ajax & Express. js
  Sử dụng Express, chúng tôi làm cho ứng dụng có thể lưu ảnh bị xóa trên máy chủ. Chúng tôi sẽ gửi dữ liệu của hình ảnh đến máy chủ thông qua XML HttpRequest.
• Bước 3. React-ify với Babel & webpack
  Để làm cho nó dễ thích nghi hơn với sự phát triển web hiện đại, chúng tôi sẽ biến ứng dụng từ Bước 2 thành ứng dụng React.

Cái này dành cho ai đó là…

Hướng dẫn từng bước này dành cho người đã biết kiến ​​thức cơ bản về Javascript nhưng chưa biết cách xây dựng ứng dụng Javascript hiện đại. Khi tôi nói Javascript hiện đại, ý tôi là Node. js, React, Angular, webpack, v.v.

Nếu bạn hoàn toàn mới làm quen với lập trình hoặc Javascript, bạn có thể thấy khó hiểu. Nhưng hãy xem bài báo và xem những gì đang ở phía trước bạn. Nếu bạn đã là chuyên gia xây dựng ứng dụng Javascript, bạn có thể thấy nó vô nghĩa

Nói cách khác, hướng dẫn này là dành cho những người như tôi. Người đã từng viết jQuery để xây dựng một trang web thông tin nhưng ít kinh nghiệm và kiến ​​thức về Javascript cho cả mặt trước và mặt sau

Nhận mã

Các mã nguồn đang được sử dụng trong mỗi bước đều có sẵn trên Github.
Hoặc chỉ đơn giản là.

$ git clone https://github.com/zacfukuda/react-drop-upload-app.git

Các mã của Bước 1 nằm trong thư mục step1-html

Trước khi chúng ta bắt đầu

Mã đang được sử dụng ở đây chủ yếu dựa trên Đọc tệp trong JavaScript bằng cách sử dụng API tệp từ HTML5 Rocks. Tôi đặt từng mã vào một tệp, loại bỏ những phần không cần thiết và thêm một số sửa đổi để giảm thiểu việc chỉnh sửa khi chúng tôi tạo ứng dụng Ajax và React trong hai bước tiếp theo sau

Mục đích cuối cùng của hướng dẫn này là giúp bạn làm quen với React. Vì vậy, tôi không xem qua tất cả các mã và không kiểm tra kỹ lưỡng. Vui lòng xem bài đăng của HTML5 Rocks nếu bạn muốn biết FileReader hoạt động như thế nào

Bắt đầu ngay bây giờ

Cấu trúc tệp của Bước 1 như sau

.
└ index.html
└ dropUploadFile.js
└ style.css

Bây giờ, trước tiên hãy tạo một chỉ mục html. Nó trông như thế này

	
	
	




	
Drop & Upload Files
	

		
Drop files here to upload
		
Upload Status
		

			

				
000%
				

			
		
	
	

cho phong cách. css, vui lòng tham khảo tệp trên Github

Bây giờ thảUploadFile. js. Đây là tệp trong đó toàn bộ logic ứng dụng được viết. Cũng giống như đã đề cập ở trên, mã của dropUploadFile. js dựa trên HTML5 Rocks. Tôi không muốn lặp lại những gì đã viết trong đó. Vì vậy, tôi cung cấp cho bạn mã hoàn chỉnh

dropUploadFile. js

(function () {
	'use strict';

	// Check for the various File API support.
	if (window.File && window.FileReader && window.FileList && window.Blob)
		console.log('OK');
	else
		alert('The File APIs are not fully supported in this browser.');

	var reader, files;
	var dropZone = document.getElementById('dropZone'),
			progress = document.getElementById('progress'),
			progressBar = document.getElementById('progressBar'),
			outputTag = document.getElementById('output');

	/**
	 * Event handlers for ReadFile.
	 */

	// Stop reading files.
	function abortRead() {
		reader.abort();
	}

	// FileReader abort Handler
	function abortHandler(e) {
		alert('File read Canceled');
	}

	// FileReader Error Handler
	function errorHandler (e) {
		switch(e.target.error.code) {
			case e.target.error.NOT_FOUND_ERR:
				alert('File Not Found!');
				break;
			case e.target.error.NOT_READABLE_ERR:
				alert('File is not readable');
				break;
			case e.target.error.ABORT_ERR:
				break; // noop
			default:
				alert('An error occurred reading this file.');
		}
	}

	// Display the progress of FileReading.
	function progressHandler(e) {
		if (e.lengthComputable) {
			var loaded = Math.round((e.loaded / e.total) * 100);
			var zeros = '';
			
			// Percent Loaded in string
			if (loaded >= 0 && loaded < 10) zeros = '00';
			else if (loaded < 100) zeros = '0';

			// Display progress in 3-digit and increase the bar length.
			progress.textContent = zeros + loaded.toString();
			progressBar.style.width = loaded + '%';

		}
	}

	// Event after loading a file completed (Append thumbnail.)
	function loadHandler(theFile) {

		return function(e) {
			var newFile = document.createElement('div');
			var picture = document.createElement('picture');
			var img = document.createElement('div');
			img.style.backgroundImage = 'url(' + e.target.result + ')';
			img.title = escape(theFile.name);
			img.className = 'thumb';

			picture.appendChild(img);
			newFile.appendChild(picture);
			newFile.className = 'file';

			outputTag.insertBefore(newFile, null);
		}
	}

	// Main function for ReadFile and appending thumbnails.
	function appendThumbnail(f) {
		reader = new FileReader();
		reader.onerror = errorHandler;
		reader.onabort = abortHandler;
		reader.onprogress = progressHandler;
		reader.onload = loadHandler(f);
		reader.readAsDataURL(f);
	}

	/**
	 * Main Event Handler to deal with
	 * the whole drop & upload process.
	 */
	function handleFileSelect(e) {
		e.stopPropagation();
		e.preventDefault();

		dropZone.classList.remove('dragover');
		progress.textContent = '000';
		progressBar.style.width = '0%';

		files = e.dataTransfer.files; // FileList object.
		
		// Go through each file.
		for (var i=0, f; f=files[i]; i++) {

			// Only process image files.
			if ( !f.type.match('image.*') ) continue;
			appendThumbnail(f);

		} // END for

	} // END handleFileSelect

	/**
	 * functions associating "drag" event.
	 */
	function handleDragEnter (e) {
		e.stopPropagation();
		e.preventDefault();
		this.classList.add('dragover');
	}
	function handleDragLeave (e) {
		e.stopPropagation();
		e.preventDefault();
		this.classList.remove('dragover');
	}
	function handleDragOver (e) {
		e.stopPropagation();
		e.preventDefault();
		e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
	}

	/**
	 * Setup the event listeners.
	 */
	dropZone.addEventListener('dragenter', handleDragEnter, false)
	dropZone.addEventListener('dragleave', handleDragLeave, false)
	dropZone.addEventListener('dragover', handleDragOver, false);
	dropZone.addEventListener('drop', handleFileSelect, false);
})();

Nó khác với HTML5 Rocks như thế nào

Thêm phần tử “id”

Chúng ta sẽ tạo các thành phần React trong Bước 3. Vì vậy, tôi đã thêm id vào từng thành phần quan trọng và giúp chúng liên kết dễ dàng hơn với các chức năng mà chúng được chỉ định

Drag & Drop over

Chúng tôi—hoặc tôi—muốn có một giao diện người dùng phong phú. Chúng tôi không muốn người dùng duyệt qua máy tính của họ trong cửa sổ chọn tệp. Tại sao không kéo và thả—mặc dù tôi cho rằng nó có nhiều khả năng gây rắc rối hơn. Bài này để học. Không phải để sử dụng nó

createElement(), appendChild(), insertB Before()

In HTML5 Rocks, the thumbnail or the file name are designed to be inserted by writing HTML texts using innerHTML. But I use createElement(), appendChild(), and insertBefore() because the thumbnail will be React component. Plus, this also makes things easier in Step 3 building the React app.

Các sự kiện “dragenter” và “dragleave”

Vì chúng tôi sử dụng giao diện kéo và thả, hai sự kiện bổ sung được thêm vào để cho người dùng biết rằng họ đang kéo tệp. Điều tương tự có thể được thực hiện với CSS. bộ chọn di chuột. Nhưng tôi đã quyết định sử dụng sự kiện Javascript chỉ để làm cho nó thú vị hơn một chút

Tiếp theo. Ajax với Express

Ứng dụng Drop & Upload ở trên là một ứng dụng HTML đơn giản. Điều đó có nghĩa là bạn không phải chạy máy chủ để xem mã có hoạt động hay không. Điều này tốt khi bạn kiểm tra một đoạn mã không yêu cầu chức năng phía máy chủ. Nhưng chúng tôi muốn tải các tệp bị rớt lên máy chủ, sau đó lưu chúng. Những gì tôi vừa chỉ cho bạn không phải là ứng dụng Drop & Upload, mà là ứng dụng Drop. Để lưu các tệp, chúng tôi cần một máy chủ đang hoạt động. Đó là những gì chúng tôi làm trong bước tiếp theo

Chúng ta sẽ sử dụng Express để chạy ứng dụng nhỏ của mình và để nó xử lý một yêu cầu POST được gửi bởi ứng dụng khách thông qua XML HttpRequest a. k. a. Ajax