google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Xử lí tệp tin với HTML5 và JavaScript Trong các bài viết trước, jsB@nk đã cung cấp cho bạn các bài viết hướng dẫn, các ứng dụng tuyệt vời được xây dựng trên nền HTML5, chẳng hạn như:

- JavaScript và Cache trong HTML5
- Ứng dụng đồ họa tuyệt vời với HTML5
- JavaScript với HTML5 vs ActionScript 3 với Flash trong đồ họa - Ai sẽ thắng?
- Các hàm JavaScript mới trong HTML5

Hôm nay, jsB@nk muốn cung cấp cho bạn thêm một bài hướng dẫn chi tiết khác về một tính năng mới và khá quan trọng của HTML5 - đó là khả năng xử lí tệp tin cục bộ (local files). Thông qua bài viết khá chi tiết này, bạn sẽ nắm vững được cách thức tạo, xóa, đọc, ghi và xử lí nội dung các tệp tin với JavaScript trên nền HTML5. Bạn vui lòng vào trang trong để xem chi tiết hướng mã và mã nguồn ví dụ.


Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

HTML5 finally provides a standard way to interact with local files, via the File API specification. As example of its capabilities, the File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline. Additionally, you could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload.

The spec provides several interfaces for accessing files from a 'local' filesystem:

  1. File - an individual file; provides readonly information such as name, file size, mimetype, and a reference to the file handle.
  2. FileList - an array-like sequence of File objects. (Think <input type="file" multiple> or dragging a directory of files from the desktop).
  3. Blob - Allows for slicing a file into byte ranges.

When used in conjunction with the above data structures, the interface can be used to asynchronously read a file through familiar JavaScript event handling. Thus, it is possible to monitor the progress of a read, catch errors, and determine when a load is complete. In many ways the APIs resemble XMLHttpRequest's event model.

Note: At the time of writing this tutorial, the necessary APIs for working with local files are supported in Chrome 6.0 and Firefox 3.6. As of Firefox 3.6.3, the File.slice() method is not supported.

Selecting files

The first thing to do is check that your browser fully supports the File API:

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
 
// Great success! All the File APIs are supported.
} else {
  alert
('The File APIs are not fully supported in this browser.');
}

Of course, if you're app will only use a few of these APIs, modify this snippet accordingly.

Using form input for selecting

The most straightforward way to load a file is to use a standard <input type="file"> element. JavaScript returns the list of selected File objects as a FileList. Here's an example that uses the 'multiple' attribute to allow selecting several files at once:

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
 
function handleFileSelect(evt) {
   
var files = evt.target.files; // FileList object

   
// files is a FileList of File objects. List some properties.
   
var output = [];
   
for (var i = 0, f; f = files[i]; i++) {
      output
.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
                  f
.size, ' bytes</li>');
   
}
    document
.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
 
}

  document
.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Example: Using form input for selecting. Try it!

Using drag and drop for selecting

Another technique for loading files is native drag and drop from the desktop to the browser. We can modify the previous example slightly to include drag and drop support.

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script>
 
function handleFileSelect(evt) {
    evt
.stopPropagation();
    evt
.preventDefault();

   
var files = evt.dataTransfer.files; // FileList object.

   
// files is a FileList of File objects. List some properties.
   
var output = [];
   
for (var i = 0, f; f = files[i]; i++) {
      output
.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
                  f
.size, ' bytes</li>');
   
}
    document
.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
 
}

 
function handleDragOver(evt) {
    evt
.stopPropagation();
    evt
.preventDefault();
 
}

 
// Setup the dnd listeners.
 
var dropZone = document.getElementById('drop_zone');
  dropZone
.addEventListener('dragover', handleDragOver, false);
  dropZone
.addEventListener('drop', handleFileSelect, false);
</script>

Example: Using drag and drop for selecting. Try it!

Drop files here

Note: Some browsers treat <input type="file"> elements as native drop targets. Try dragging files onto the input field in the previous example.

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web