原生js获取文件

HTML5新增了关于文件的File，FileReader两个对象，用于获取文件信息和读取文件信息。

var

    fileInput = document.getElementById('test-image-file'),

    info = document.getElementById('test-file-info'),

    preview = docement.getElementById('test-image-preview')

//监听change事件

fileInput.addEventListener('change', function() {

  //清除背景图片

  preview.style.backgroundImage = ''

  //检查文件是否选择

  if(!fileInput.value) {

    info.innerHTML = '没有选择文件'

    return

  }

  //获取file文件引用：

  var file = fileInput.files[0]

  //获取文件信息

  info.innerHTML = '文件：' + file.name + '<br>' +

                  '大小：' + file.size + '<br>' +

                  '修改：' + file.lastModifiedDate

if(file.type !== 'image/jpeg' &&file.type !== 'image/png' &&file.type !== 'image/gif') {

  alert('不是有效的图片文件')

  return

}

  //读取文件

  var reader = new FileReader()

  reader.onload = function(e) {

    var data = e.target.result

  preview.style.backgroundImage = 'url('+ data + ')'

  }

  //以DataURL的形式读取文件：

  reader.readerAsDataURL(file)

})

代码如下:

<script type="text/javascript">

//FX获取文件路径方法

function readFileFirefox(fileBrowser) {

try {

netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect")

}

catch (e) {

alert('无法访问本地文件，由于浏览器安全设置。为了克服这一点，请按照下列步骤 *** 作：(1)在地址栏输入"about:config"(2) 右键点击并选择 New->Boolean(3) 输入"signed.applets.codebase_principal_support" （不含引号）作为一个新的首选项的名称(4) 点击OK并试着重新加载文件')

return

}

var fileName=fileBrowser.value//这一步就能得到客户端完整路径。下面的是否判断的太复杂，还有下面得到ie的也很复杂。

var file = Components.classes["@mozilla.org/file/local1"]

.createInstance(Components.interfaces.nsILocalFile)

try {

// Back slashes for windows

file.initWithPath( fileName.replace(/\//g, "\\\\") )

}

catch(e) {

if (e.result!=Components.results.NS_ERROR_FILE_UNRECOGNIZED_PATH) throw e

alert("File '" + fileName + "' cannot be loaded: relative paths are not allowed. Please provide an absolute path to this file.")

return

}

if ( file.exists() == false ) {

alert("File '" + fileName + "' not found.")

return

}

---