Kéo tập tin văn bản thả n '

Tôi muốn các tập tin văn bản bị xóa được hiển thị bởi nội dung của chúng hoặc vị trí hoàn chỉnh của chúng để tôi có thể tải nội dung của vị trí đó vào "drop_zone".Kéo tập tin văn bản thả n '

Đây là những gì tôi có cho đến bây giờ. Tôi chỉ có thể truy cập tên tệp:

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<textarea id="drop_zone">Drop files here</textarea> 
<output id="list"></output> 

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

    var files = evt.dataTransfer.files; // FileList object. 
    document.getElementById('drop_zone').innerHTML = files[0].name; 
    } 

    function handleDragOver(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
    } 

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

Nguồn

2012-08-31 Meysam Feghhi

đây là mã cuối cùng:

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<textarea id="drop_zone">Drop files here</textarea> 
<script> 
    function handleFileSelect(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; // FileList object. 
    var reader = new FileReader(); 
    reader.onload = function(event) {    
     document.getElementById('drop_zone').value = event.target.result; 
    }   
    reader.readAsText(files[0],"UTF-8"); 
    } 

    function handleDragOver(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
    } 

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

Nguồn

2012-08-31 12:06:28

http://www.html5rocks.com/en/tutorials/file/dndfiles/ phải là tài nguyên tốt. Bạn cần sử dụng FileReader để đọc nội dung của tệp dưới dạng Chuỗi.

Nguồn

2012-08-31 11:10:16 Maz

Do giới hạn bảo mật, trang không thể tải nội dung của tệp mà không có thứ gì đó giống như một Java applet được thiết lập với các quyền phù hợp; và, thậm chí sau đó, nó không phải là quá tốt.

Tuy nhiên, đó không phải là để nói rằng điều đó là không thể; chỉ cần tải tệp lên máy chủ và lặp lại nội dung đó cho trình duyệt. Đó là số lượng chức năng ứng dụng web chỉnh sửa văn bản.

Cách bạn triển khai điều này tùy thuộc vào bạn.

Hơn nữa, như Maz đã chỉ ra, bạn cũng có thể sử dụng các API tích hợp để hỗ trợ bạn thực hiện những gì bạn đang cố gắng làm. Tuy nhiên, lưu ý rằng giải pháp này không nhất thiết phải tương thích với trình duyệt chéo.

Nguồn

2012-08-31 11:12:18 Qix

Kéo tập tin văn bản thả n '

Trả lời

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