I need some help with HTML5. I have a script that loops through all the uploaded files and gets each file details. Currently I am using HTML5 techniques that include FileReader. The FileReader function only works in Chrome and Firefox, so I am loo开发者_运维百科king for an alternative which will work in all of the other browsers.
I saw the Stack Overflow question Flash alternative for FileReader HTML 5 API, but I wasn't able to figure how to use this Flash thing, and aren't there any other solutions so I can loop through all of the uploaded files and get each file details (which will work in Safari and Internet Explorer)?
Ended up not using FileReader at all, instead I looped through event.files and got each file by files[i] and sent an AJAX request by XHR with a FormData object (worked for me because I decided I don't need to get the file data):
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;
}
}
}
Safari was the first one to actually implement the HTML5 file API, and there are several demos. Andrea Giammarchi has a nice description on his blog. There are several frameworks to handle this as well which also have fallbacks for Internet Explorer. Fancyupload is one that comes to mind.
精彩评论