-
-
Save ebidel/2410898 to your computer and use it in GitHub Desktop.
| <?php | |
| $fileName = $_FILES['afile']['name']; | |
| $fileType = $_FILES['afile']['type']; | |
| $fileContent = file_get_contents($_FILES['afile']['tmp_name']); | |
| $dataUrl = 'data:' . $fileType . ';base64,' . base64_encode($fileContent); | |
| $json = json_encode(array( | |
| 'name' => $fileName, | |
| 'type' => $fileType, | |
| 'dataUrl' => $dataUrl, | |
| 'username' => $_REQUEST['username'], | |
| 'accountnum' => $_REQUEST['accountnum'] | |
| )); | |
| echo $json; | |
| ?> |
| <!DOCTYPE html> | |
| <!-- | |
| Copyright 2012 Google Inc. | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. | |
| Author: Eric Bidelman ([email protected]) | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> | |
| <title>xhr.send(FormData) Example</title> | |
| </head> | |
| <body> | |
| <input type="file" name="afile" id="afile" accept="image/*"/> | |
| <script> | |
| document.querySelector('#afile').addEventListener('change', function(e) { | |
| var file = this.files[0]; | |
| var fd = new FormData(); | |
| fd.append("afile", file); | |
| // These extra params aren't necessary but show that you can include other data. | |
| fd.append("username", "Groucho"); | |
| fd.append("accountnum", 123456); | |
| var xhr = new XMLHttpRequest(); | |
| xhr.open('POST', 'handle_file_upload.php', true); | |
| xhr.upload.onprogress = function(e) { | |
| if (e.lengthComputable) { | |
| var percentComplete = (e.loaded / e.total) * 100; | |
| console.log(percentComplete + '% uploaded'); | |
| } | |
| }; | |
| xhr.onload = function() { | |
| if (this.status == 200) { | |
| var resp = JSON.parse(this.response); | |
| console.log('Server got:', resp); | |
| var image = document.createElement('img'); | |
| image.src = resp.dataUrl; | |
| document.body.appendChild(image); | |
| }; | |
| }; | |
| xhr.send(fd); | |
| }, false); | |
| </script> | |
| <!--[if IE]> | |
| <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> | |
| <script>CFInstall.check({mode: 'overlay'});</script> | |
| <![endif]--> | |
| </body> | |
| </html> |
Thank you very much. Your example help me so much. I looking long time how to upload files to server via xhr. And again, thank you so much.
Thanks a lot, after looking all day long I finally found the right script!!!
Note to anyone finding this via Google and working with MVC: To use FormData, you'd have to post using xhr.setRequestHeader("Content-Type","multipart/form-data"); - not included above - but then your server-side will throw an exception if you use
if (!Request.Content.IsMimeMultipartContent() { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); }
which is something it should never do, so I'm convinced FormData can only be used with PHP. Better to get the file into a base64 string (I have an example here: https://stackoverflow.com/questions/37134433/convert-input-file-to-byte-array/49676679#49676679 ), create a JSON object:
var dataObj = { afile: myBase64file, username: "Groucho", accountnum: 123456, };,
add in this after the xhr.open():
xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8");
then do xhr.send(JSON.stringify(dataObj)); at the end.
On the MVC side, you need:
[System.Web.Http.HttpPost]
public virtual ActionResult Post([FromBody]MyModel myModelObject) { ... }
You'll need to have a model:
public class MyModel {
public string afile { get; set; }
public string username { get; set; }
public int accountnum { get; set; }
}
Inside the Post, the parameters should be accessible: string file = myModelObject.afile;
Hey! you are great!! thnks !!!
Note to anyone finding this via Google Search about Cordova File Upload:
You can use this code on input:file with position:absolute; opacity:0; trick too. Works like a charm.
can send(fd) plus other such as image size?
Yes. You can still populate the data: {} property as you wish.
What I said just triggers the usual use case for the plugin.
And it still works to this day!
I can access rsp.dataUrl my object all the time refuses to read into it, i have it undefined, pls help.
Awesome, have been looking for this all day!
Thanks!