HTML5 FileReader 替代方案

Question

我需要关于HTML5的帮助，我有一个脚本可以循环遍历所有上传的文件并获取每个文件的详细信息。目前我正在使用包括FileReader在内的HTML5技术。但是，FileReader函数只在Chrome和Firefox中有效，因此我正在寻找其他可在所有其他浏览器中都能工作的替代方法。

我看到了Stack Overflow上的一个问题（Flash替代品用于FileReader HTML 5 API），但是我无法弄清楚如何使用这个Flash，并且是否有其他解决方案让我可以循环遍历所有上传的文件并获取每个文件的详细信息（适用于Safari和Internet Explorer）？

- AdamGold

---

更好的问题不是如何使用这个闪存吗？ - Ruan Mendes

也许是这样，但这个Flash东西似乎并不完美。我想了解更多替代方案的想法。如果有人能帮我设置这个Flash东西，我也会很感激。 - AdamGold

Answer 1

最终我没有使用FileReader，而是循环遍历event.files并通过files[i]获取每个文件，然后使用带有FormData对象的XHR发送AJAX请求（这对我非常有效，因为我决定不需要获取文件数据）：

var xhrPool = {};
var dt = e.dataTransfer;
var files = (e.files || dt.files);
for (var i = 0; i < files.length; i++) {
    var file = files[i];
    // more code...

    xhrPool[i] = getXMLHttpRequest();
    xhrPool[i].upload.onprogress = uploadProgress;
    initXHRRequest(xhrPool[i], i, file);
    data = initFormData(i, file);

    xhrPool[i].send(data);
}

function initFormData(uploaded, file) {
    var data = new FormData();
    data.append(uploaded, file);
    // parameters...

    return data;
}

function uploadProgress() {
    // code..
}

function initXHRRequest(xhr, uploaded, file) {
    // code... onreadystatechange...
    xhr.open("POST", "ajax/upload.php");
    xhr.setRequestHeader("X-File-Name", file.name);
}

function getXMLHttpRequest() 
{
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        catch(ex) {
            return null;
        }
    }
}

- AdamGold

---

你正在遍历 input.file[0] 吗？因为我也在寻找替代方案。 - Hunt

Answer 2

Safari是第一个实现HTML5文件API的浏览器，有几个演示。Andrea Giammarchi在他的博客上有一个好的描述。还有一些框架也可以处理这个问题，并且还有Internet Explorer的备用方案。Fancyupload是其中之一。

- cellcortex

---

请注意：尽管Fancyupload具有优雅的降级功能，但它仍然依赖Flash才能正常工作。 - Chris