jquery - File open to upload to server -

i have dynamically generated file need upload s3 server.

if use html input filebox choose file, works properly.

var file = $('#file-chooser')[0].files[0]; 

but when pass path of file in variable, not working. missing.

 var filename = "file:///http://localhost:7443/somepath/somefile.mp3"; 

what missing.

uploading files server first of need create 3 variables hold references <form>, <input>, , <button> elements in html markup.

var form = document.getelementbyid('file-form'); var fileselect = document.getelementbyid('file-select'); var uploadbutton = document.getelementbyid('upload-button'); 

next need attach event listener form’s onsubmit event.

form.onsubmit = function(event) {   event.preventdefault();    // update button text.   uploadbutton.innerhtml = 'uploading...';    // rest of code go here... } 

inside event listener start calling preventdefault() on event object passed handler. prevent browser submitting form, allowing handle file upload using ajax instead.

next update innerhtml property on uploadbutton uploading.... provides bit of feedback user know files uploading.

your next job retrieve filelist element , store in variable. can accessing files property.

// selected files input. var files = fileselect.files; 

you create new formdata object. used construct key/value pairs form data payload ajax request.

// create new formdata object. var formdata = new formdata(); 

your next job loop through each of files in files array , add them formdata object created. you’ll want check user has selected type of file you’re expecting.

// loop through each of selected files. (var = 0; < files.length; i++) {   var file = files[i];    // check file type.   if (!file.type.match('image.*')) {     continue;   }    // add file request.   formdata.append('photos[]', file, file.name); } 

here you’re first fetching current file files array , checking make sure it’s image. file’s type property return file type string. can therefore use javascript match() method ensure string matches desired type. if file type not match, skip file calling continue.

you use append method on formdata object add file data payload.