Dữ liệu tệp từ phần tử nhập

Question

Trong Firefox 3, bạn có thể truy cập nội dung của phần tử <input type="file"> như sau.

Giả sử một mẫu với các yếu tố sau:

<input type="file" id="myinput"> 

Bây giờ dữ liệu của tập tin được lựa chọn có thể được truy cập với:

// Get the file's data as a data: URL 
document.getElementById('myinput').files[0].getAsDataURL() 

Có cách nào qua trình duyệt để thực hiện cùng Điều?

tài liệu Firefox cho tính năng này:

• https://developer.mozilla.org/en/nsIDOMFileList
• https://developer.mozilla.org/en/nsIDOMFile

Answer 1

Điều này có thể trong ít nhất Chrome, Firefox và Safari: Reading Files. xem được liên kết jsfiddle

function readBlob(opt_startByte, opt_stopByte) { 

    var files = document.getElementById('files').files; 
    if (!files.length) { 
     alert('Please select a file!'); 
     return; 
    } 
    var file = files[0]; 
    var start = parseInt(opt_startByte) || 0; 
    var stop = parseInt(opt_stopByte) || file.size - 1; 

    var reader = new FileReader(); 

    // If we use onloadend, we need to check the readyState. 
    reader.onloadend = function(evt) { 
     if (evt.target.readyState == FileReader.DONE) { // DONE == 2 
      document.getElementById('byte_content').textContent = _.reduce(evt.target.result, 
       function(sum, byte) { 
        return sum + ' 0x' + String(byte).charCodeAt(0).toString(16); 
       }, ''); 
     document.getElementById('byte_range').textContent = 
      ['Read bytes: ', start + 1, ' - ', stop + 1, 
      ' of ', file.size, ' byte file'].join(''); 
     } 
    }; 

    var blob; 
    if (file.slice) { 
     blob = file.slice(start, stop + 1); 
    }else if (file.webkitSlice) { 
     blob = file.webkitSlice(start, stop + 1); 
    } else if (file.mozSlice) { 
     blob = file.mozSlice(start, stop + 1); 
    } 
    console.log('reader: ', reader); 
    reader.readAsBinaryString(blob); 
    } 

    document.querySelector('.readBytesButtons').addEventListener('click', function(evt) { 
    if (evt.target.tagName.toLowerCase() == 'button') { 
     var startByte = evt.target.getAttribute('data-startbyte'); 
     var endByte = evt.target.getAttribute('data-endbyte'); 
     readBlob(startByte, endByte); 
    } 
    }, false);