2012-07-03 45 views
7

Tôi muốn cho phép người dùng kéo và thả (hoặc chọn) tệp từ máy tính của họ và tải tệp đó vào hộp văn bản có JavaScript.Kéo và thả HTML5: Tải tệp văn bản vào hộp văn bản có JavaScript

Có thể tải tệp cục bộ bằng JavaScript vào hộp văn bản không? Nếu có, thì làm thế nào?

+0

Không phải là điều này có thể không tải lên các tập tin đến máy chủ có lẽ với 'FileReader()' –

+0

Bạn có nghĩa là một cái gì đó như [này] (http: // html5demos.com/file-api) được tinh chỉnh cho các tệp văn bản? –

+0

Có cho TEXT Files. –

Trả lời

16

Tôi nghĩ rằng tất cả mọi thứ bạn muốn cho HTML5 được bao gồm trong remy/html5demos trên github.

Ví dụ: tôi đã sửa đổi http://html5demos.com/file-api để chấp nhận tệp văn bản và hiển thị chúng trong trình duyệt.

Xem jsfiddle.

Sửa
kịch bản liên quan:

// modified from http://html5demos.com/file-api 
var holder = document.getElementById('holder'), 
    state = document.getElementById('status'); 

if (typeof window.FileReader === 'undefined') { 
    state.className = 'fail'; 
} else { 
    state.className = 'success'; 
    state.innerHTML = 'File API & FileReader available'; 
} 

holder.ondragover = function() { 
    this.className = 'hover'; 
    return false; 
}; 
holder.ondragend = function() { 
    this.className = ''; 
    return false; 
}; 
holder.ondrop = function(e) { 
    this.className = ''; 
    e.preventDefault(); 

    var file = e.dataTransfer.files[0], 
     reader = new FileReader(); 
    reader.onload = function(event) { 
     console.log(event.target); 
     holder.innerText = event.target.result; 
    }; 
    console.log(file); 
    reader.readAsText(file); 

    return false; 
};​ 
+0

Sự kiện 'ondragend' không hoạt động trên Chrome 56, trên máy Mac của tôi. Tôi phải đổi nó thành 'onmouseleave'. – Jersh

Các vấn đề liên quan