来自输入元素的文件数据 [英] File data from input element

问题描述

在Firefox 3中，可以访问< input type =file> 元素的内容，如下所示。

假设一个具有以下元素的表单：

 < input type =fileid =myinput> 
  

现在可以通过以下方式访问所选文件的数据：

  //获取文件的数据作为数据：URL 
 document.getElementById（'myinput'）。files [0] .getAsDataURL（）
  

是否有跨浏览器方式来完成同样的事情吗？

此功能的Firefox文档：

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


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

解决方案

这至少可以在Chrome，Firefox和Safari中使用：阅读文件。
请参阅相关的 jsfiddle

  function readBlob（opt_startByte，opt_stopByte）{
 
 var files = document.getElementById（'files'）。 
 if（！files.length）{
 alert（'请选择一个文件！'）; 
 return; 
} 
 var file = files [0]; 
 var start = parseInt（opt_startByte）|| 0; 
 var stop = parseInt（opt_stopByte）|| file.size  -  1; 
 
 var reader = new FileReader（）; 
 
 //如果我们使用onloadend，我们需要检查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）; 
  

In Firefox 3 it is possible to access the contents of a <input type="file"> element as in the following.

Assume a form with the following element:

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

Now the data of the file selected can be accessed with:

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

Is there a cross-browser way to accomplish the same thing?

Firefox documentation for this feature:

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

解决方案

This is possible in at least Chrome, Firefox and Safari: Reading Files. see associated 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);

这篇关于来自输入元素的文件数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！