[英]PHP+JS: How to do Fileuploads in HTML Form as Content-Type Multipart (via JS)?
Having an HTML Form that is submittet via POST (user clicking the submit button). 具有通过POST提交的HTML表单(用户单击“提交”按钮)。
Furthermore having an image that is read via Javascript of a canvas object (getImageData()). 此外,还具有通过画布对象的Javascript(getImageData())读取的图像。
Question: 题:
How to "inject" this image data into the HTML Form, so that it gets uploaded as Content-Type:multipart/form-data and can be processed via the existing PHP Frameworks Data Extraction Logic? 如何将该图像数据“注入”到HTML表单中,以便将其作为Content-Type:multipart / form-data上传并可以通过现有的PHP Frameworks数据提取逻辑进行处理?
Example from a <input type="file"
upload captured with CHrome in a POST request => it should look like this 来自CHrome在POST请求=中捕获的
<input type="file"
上传示例,它看起来应该像这样
------WebKitFormBoundaryBBAQ5B4Ax1NgxFmD
Content-Disposition: form-data; name="images"; filename="fooimage.png"
Content-Type: image/png
Problem: I know how to uploed it in a seperate request (via ajax, seperate from the form). 问题:我知道如何在单独的请求中提出要求(通过ajax,与表格分开)。 I know how to upload it as base64 Data an process it manually in the form.
我知道如何将它作为base64数据上载到表单中的手动处理过程。
But I do not know how to send the Image Data along the exiting Form so that it looks for the PHP Serverside Scripts exactly the same as an image that is send via <input type="file"...
但是我不知道如何沿着现有表单发送图像数据,以便它查找与通过
<input type="file"...
发送的图像完全相同的PHP服务器端脚本<input type="file"...
Reason: Symphony (FileUpload Object) checks if a file is uploaded via the POST Form and fails if I manulally instanciate the object with the data. 原因:Symphony(FileUpload对象)检查文件是否通过POST表单上传,如果我手动使用数据实例化对象,则失败。
So the best solution would be (in regards to a lot of other things, like testing, avoiding unnecessary logik), if the data would be passed the same as a regular form upload. 因此,最好的解决方案是(关于很多其他事情,例如测试,避免不必要的logik),如果数据将以与常规表单上载相同的方式传递。 How to do this?
这个怎么做?
Thanks! 谢谢!
You can use a FormData object to get the values of your form, and then append a blob version of your canvas into the FormData. 您可以使用FormData对象获取表单的值,然后将画布的Blob版本附加到FormData中。
This blob will be seen as a file by the server. 该斑点将被服务器视为文件。
Unfortunately, all browsers still don't support the native canvas.toBlob()
method, and even worth, all implementations are not the same.不幸的是,所有浏览器仍然不支持本地 canvas.toBlob()
方法,甚至值得,所有实现都不相同。
All major browsers now support the toBlob method, and you can find a polyfill on mdn for older browsers. 现在,所有主要的浏览器都支持toBlob方法,并且您可以在mdn上为较旧的浏览器找到一个 polyfill。
// the function to create and send our FormData
var send = function(form, url, canvas, filename, type, quality, callback) {
canvas.toBlob(function(blob){
var formData = form ? new FormData(form) : new FormData();
formData.append('file', blob, filename);
var xhr = new XMLHttpRequest();
xhr.onload = callback;
xhr.open('POST', url);
xhr.send(formData);
}, type, quality);
};
// How to use it //
var form = document.querySelector('form'), // the form to construct the FormData, can be null or undefined to send only the image
url = 'http://example.com/upload.php', // required, the url where we'll send it
canvas = document.querySelector('canvas'), // required, the canvas to send
filename = (new Date()).getTime() + '.jpg',// required, a filename
type = 'image/jpeg', // optional, the algorithm to encode the canvas. If omitted defaults to 'image/png'
quality = .5, // optional, if the type is set to jpeg, 0-1 parameter that sets the quality of the encoding
callback = function(e) {console.log(this.response);}; // optional, a callback once the xhr finished
send(form, url, canvas, filename, type, quality, callback);
PHP side would then be : PHP方面将是:
if ( isset( $_FILES["file"] ) ){
$dir = 'some/dir/';
$blob = file_get_contents($_FILES["file"]['tmp_name']);
file_put_contents($dir.$_FILES["file"]["name"], $blob);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.