<!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="file" id="file"> <button id="trigger">trigger</button> <script type="text/javascript"> var file = document.getElementById("file"); var trigger = document.getElementById("trigger"); trigger.addEventListener("click", function(e){ var reader = new FileReader(); reader.readAsDataURL(file.files[0].slice()); reader.addEventListener("loadend", function(e){ req = new XMLHttpRequest(); req.overrideMimeType("text/plain"); req.addEventListener("load", function(e){ var img = document.createElement("img"); img.src = e.target.response; document.body.appendChild(img); }, false); req.open("post", "./tmp_50.php"); var sBoundary = "---------------------------" + Date.now().toString(16); req.setRequestHeader("Upgrade-Insecure-Requests", "1"); req.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + sBoundary); var data = new Blob(["--" + sBoundary + " " + "Content-Disposition: form-data; name="payload"; filename="payload.data"" + " " + "Content-Type: application/octet-stream" + " " + " ", reader.result, " " + "--" + sBoundary + "--" + " "], {type : 'application/octet-stream'}); req.send(data); }); }, false); </script> </body> </html>
PHP:
<?php header("Content-Type: image/jpeg"); //move_uploaded_file($_FILES['payload']['tmp_name'], './files/tmp_50.jpg'); echo file_get_contents($_FILES['payload']['tmp_name']); ?>