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 looking 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.
Related
I've build an application on the Azure (microsoft) emotion API, but that was just merged with their cognitive services face API. I'm using a webcam to send an image (in binary data) to their server for analysis, and used to get an xml in return. (I've already commented out some old code, in this example. Trying to get it fixed).
function saveSnap(data){
// Convert Webcam IMG to BASE64BINARY to send to EmotionAPI
var file = data.substring(23).replace(' ', '+');
var img = Base64Binary.decodeArrayBuffer(file);
var ajax = new XMLHttpRequest();
// On return of data call uploadcomplete function.
ajax.addEventListener("load", function(event) {
uploadcomplete(event);
}, false);
// AJAX POST request
ajax.open("POST", "https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=emotion","image/jpg");
ajax.setRequestHeader("Content-Type","application/json");
//ajax.setRequestHeader("Accept","text/html,application/xhtml+xml,application/xml");
ajax.setRequestHeader("Ocp-Apim-Subscription-Key","subscription_key");
ajax.send(img);
}
now I understood from their website the call returns a JSON. But I just can't get it to work. I can see there is data coming back, but how do I even get the JSON out of it. I'm probably missing something essential, and hope someone can help me out. :) the program was working when I could still use the Emotion API.
function uploadcomplete(event){
console.log("complete");
console.log(event);
//var xmlDoc = event.target.responseXML;
//var list = xmlDoc.getElementsByTagName("scores");
console.log(JSON.stringify(event));
A few issues to address:
You'll want to wait for the POST response, not just for the upload
completion.
You'll want to set the content type to be application/octet-stream if you are uploading a binary as you are.
You'll want to set the subscription key to the real value (you probably did before pasting your code here.)
.
function saveSnap(data) {
// Convert Webcam IMG to BASE64BINARY to send to EmotionAPI
var file = data.substring(23).replace(' ', '+');
var img = Base64Binary.decodeArrayBuffer(file);
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == XMLHttpRequest.DONE) {
console.log(JSON.stringify(ajax.response));
}
}
ajax.open('post', 'https://westcentralus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&returnFaceAttributes=emotion');
ajax.setRequestHeader('Content-Type', 'application/octet-stream');
ajax.setRequestHeader('Ocp-Apim-Subscription-Key', key);
ajax.send(img);
}
I have many pieces of a video in base64.
Just that I want is to play the video progressively as I receive them.
var fileInput = document.querySelector('input#theInputFile');//multiple
fileInput.addEventListener('change', function(e) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = fileInput.files[i]
fileLoaded(file, 0, 102400, file.size);
};
e.preventDefault();
});
videoA=[];
function fileLoaded(file, ini, end, size) {
if (end>size){end=size}
var reader = new FileReader();
var fr = new FileReader();
fr.onloadend = function(e) {
if (e.target.readyState == FileReader.DONE) {
var piece = e.target.result;
display(piece.replace('data:video/mp4;base64,', ''));
}
};
var blob = file.slice(ini, end, file.type);
fr.readAsDataURL(blob);
var init = end;
var endt = init+end;
if (end<size){
fileLoaded(file, init, end, size);
}
}
Trying to display the video by chunks:
var a=0;
function display(vid, ini, end) {
videoA.push(vid);
$('#video').attr('src','data:video/mp4;base64,'+videoA[a]);
a++;
}
I know this is not the way but I`m trying to search and any response adjust to that I'm searching.
Even I'm not sure if it is possible.
Thanks!
EDIT
I've tried to play the chunks one by one and the first one is played well but the rest of them give the error:
"Uncaught (in promise) DOMException: Failed to load because no supported source was found".
If I could make the chunks to base64 correctly it's enough for me
Ok, the solution is to solve the creation of base64 pieces from the original uploaded file in the browser that can be played by an html5 player
So I've put another question asking for that.
Chunk video mp4 file into base64 pieces with javascript on browser
I would like to change the pitch of a sound file using the HTML 5 Audio node.
I had a suggestion to use the setVelocity property and I have found this is a function of the Panner Node
I have the following code in which I have tried changing the call parameters, but with no discernible result.
Does anyone have any ideas, please?
I have the folowing code:
var gAudioContext = new AudioContext()
var gAudioBuffer;
var playAudioFile = function (gAudioBuffer) {
var panner = gAudioContext.createPanner();
gAudioContext.listener.dopplerFactor = 1000
source.connect(panner);
panner.setVelocity(0,2000,0);
panner.connect(gainNode);
gainNode.connect(gAudioContext.destination);
gainNode.gain.value = 0.5
source.start(0); // Play sound
};
var loadAudioFile = (function (url) {
var request = new XMLHttpRequest();
request.open('get', 'Sounds/English.wav', true);
request.responseType = 'arraybuffer';
request.onload = function () {
gAudioContext.decodeAudioData(request.response,
function(incomingBuffer) {
playAudioFile(incomingBuffer);
}
);
};
request.send();
}());
I'm trying to achieve something similar and I also failed at using PannerNode.setVelocity().
One working technique I found is by using the following package (example included in the README): https://www.npmjs.com/package/soundbank-pitch-shift
It is also possible with a biquad filter, available natively. See an example here: http://codepen.io/qur2/pen/emVQwW
I didn't find a simple sound to make it obvious (CORS restriction with ajax loading).
You can read more at http://chimera.labs.oreilly.com/books/1234000001552/ch04.html and https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode.
Hope this helps!
what i'm trying to do is uploading a file, slice it into 3 parts and give each one to different databases, so i
can excess it later by connecting all parts.
the only trouble i have is sending the binary-string to php so i can write it to my databases.
i have no clew what setting the content-type header to etc. althrough lots of other people seem to have a similar problem, i couldn't find any satisfying solution.
any help?
CODE/
index.php
<input type="file" id="file" name="file" onchange="filesProcess(this.files)" /><br/>
javascript
function filesProcess(files) {
for (i = 0; i<files.length;i++){
var file = files[i];
var users = 3;
var abschnitt = file.size/users;
var start = 0;
for (var z = 1; z<=users; z++){
sliceFiles(z, users, start, file, abschnitt);
start = start + abschnitt + 1;
}
}
}
function sliceFiles(z, users, start, file, abschnitt) {
var reader = new FileReader();
var blob = file.slice(start, abschnitt);
reader.readAsBinaryString(blob);
reader.onloadend = function(evt) {
var contentfile = evt.target.result;
upload(z, users, contentfile);
}
}
function upload(z, users, contentfile) {
xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200)
{
$("#output").html(xhr.responseText);
}
}
if (z == 1){
xhr.open("POST","upload_1.php",true);
}
if (z == 2){
xhr.open("POST","upload_2.php",true);
}
if (z == 3){
xhr.open("POST","upload_3.php",true);
}
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.send("inhalt="+contentfile);
}
Are you trying to send the blob as a string? Anyway, maybe the link below is helpful. It's about a chunked file uploader for Google Gears, I've implemented a similar solution a while back when Gears was still hot. The new JS File API implementation isn't that different, so I reckon you could modify the solution to fit your needs (and for use with the new JS File Api).
http://perplexed.co.uk/549_gears_multiple_file_upload.htm
UPDATED: after some looking around, it appears that the issue is with IE8 and replacing innerHTML in tables, rather than the json code (see here). An alert proves that the json code is returning the expected text, but I can't for the life of me get it to shove into the spot I want it. Apparently there's a problem with innerHTML and table cells, and you can't replace an entire table's contents; you have to target a specific cell. However, I need to generate the contents of tbody - there isn't a single existing row or cell I can use.
================================================================================
I've been handed some code written by a developer who is no longer with the company. The code works with no problem in Firefox and Chrome, but does not work at all in IE (7 or 8). It is not throwing any errors; it just isn't displaying the response. Here are the two functions; can anyone help me out? I've only just gotten back into web work after 10 years with legacy apps, so I don't know where to start.
var xmlhttp;
var the_object = {};
var suggestions = [];
function loadXMLDoc(url) {
xmlhttp=null;
if (window.XMLHttpRequest) {// code for IE7, Firefox, Mozilla, etc.
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5, IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp != null) {
xmlhttp.onreadystatechange = onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
} else {
alert("Your browser does not support XMLHTTP.");
}
}
function onResponse() {
if (xmlhttp.readyState!=4) return;
if (xmlhttp.status!=200) {
alert("Problem retrieving XML data");
return;
}
//JSON response code
the_object = eval('(' + xmlhttp.responseText + ')');
if (the_object.errMsg){
alert(the_object.errMsg);
}else{
**document.getElementById("shoppingCartTable").innerHTML = the_object.cartHTML;**
}
}
function searchMerchants(term){
url = "/merchant-list/?format=json&q=" + term;
loadXMLDoc(url);
}
function addToCart(id){
var denElem = document.getElementById('item'+id+'_den');
var quanElem = document.getElementById('item'+id+'_quan');
if (denElem.options){
var den = denElem.options[denElem.selectedIndex].value;
}else{
var den = denElem.value;
}
var quan = quanElem.options[quanElem.selectedIndex].value;
var voucherNbr = document.getElementById("voucherNbr").value;
var url = "/redeem/add-to-cart/?action=add&format=json&voucherNbr=" + voucherNbr + "&merchantId=" + id + "&denomination=" + den + "&quantity=" + quan;
loadXMLDoc(url);
}
I found that if I generated the entire table via json rather than just the body, and targeting a span's innerHTML, it works fine.