在javascript中替換XMLHttpRequest

Question

我用XMLHttpRequest讀取本地文件。

function getData(fileName) 
{ 
    var filePath = fileName; 
    xmlhttp = new XMLHttpRequest(); 
    xmlhttp.open("GET", filePath, false); 
    xmlhttp.send(null); 
    var fileContent = xmlhttp.responseText; 
    var tempArr = csv2Arr(fileContent); 
    var returnLabelArr = tempArr[0].toString().split(',');  
    tempArr.shift(); 
    var returnDataArr = tempArr; 
    return { 'dataArr' : returnDataArr, 'labelArr' : returnLabelArr }; 
} 

fileName以「C：// ...」開頭，我的程序在地址爲「file：/// ...」的瀏覽器上運行。

但是，如果沒有「--allow-file-access-from-files」標籤，我的代碼在Chrome上不起作用。而且它也不能在IE和Firefox上運行而不改變一些安全選項。 所以，我試圖jQuery的API類似這樣的，

function getData(fileName) 
{ 
var filePath = fileName; 
var fileContent; 

$.ajax({ 
    type: "GET", 
    url: filePath 
}) 
.done(function(data) { 
    alert(data); 
    fileContent = data; 
}); 

var tempArr = csv2Arr(fileContent); 
var returnLabelArr = tempArr[0].toString().split(','); 
tempArr.shift(); 
var returnDataArr = tempArr; 
return { 'dataArr' : returnDataArr, 'labelArr' : returnLabelArr }; 
} 

的問題也會發生。我認爲Same-origin policy可以阻止它。

任何人都可以給我一些建議，讓我在不改變安全選項的情況下訪問本地文件嗎？我應該使用一些插件來解決這個問題嗎？

請讓我知道。 謝謝。

Answer 1

如果可以用<input type="file">選擇文件，那麼解決的辦法是：

HTML：

<form action=""> 
    <input type="file" id="file-input" multiple="multiple" accept="image/jpeg" /> 
</form> 

JS：

var fileInput = document.querySelector('#file-input'); 
fileInput.addEventListener('change', function(event) { 
    var files = fileInput.files; 
    if (files.lenght == 0) { 
     return; 
    } 
    for(var i = 0; i < files.length; i++) { 
     readFile(files[i]); 
    } 
    fileInput.value = ""; 
}, false); 

var readFile= function(file) { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     var dataUrl = e.target.result; 

     // now, load the data into some element 
     // if this is image, you can do this: 
     var image = new Image(); 
     image.src = dataUrl; 
     document.body.appendChild(image); 
    }; 
    reader.readAsDataURL(file); 
}; 

而且，發現FileReader API找出來，怎麼樣否則可以使用它，因爲它有更多的方法來讀取數據。