Home > Backend Development > PHP Tutorial > javascript - 表单如何提交base64的格式的图片?

javascript - 表单如何提交base64的格式的图片?

WBOY
Release: 2016-06-06 20:46:48
Original
1729 people have browsed it

后端是用PHP的$_FILES变量获取提交的文件。

正常的表单提交是这样。

<code><h2>正常表单提交,enctype=multipart/form-data</h2>
  <form action="upload.php" method="post" enctype="multipart/form-data" id="form-1">
  <label for="file-1">file</label>
  <input type="file" name="file" id="file-1">
  <input type="submit" value="submit">
</form> 
</code>
Copy after login
Copy after login

我这里的情况是,上传的文件,是来自外部的一串base64字符串,这里该如何转变,才能实现模拟表单提交,后台不需要更改代码。

PS:
我尝试把base64放在FormData对象里面,但后台的$_FILES变量依旧不能识别

<code>function sendFormByBase64(){
    var form = document.getElementById('form-2');
    var formData = new FormData();

    var base64 ='/* 这里面是base64字符串 */';

    formData.append('file', base64);

    var xhr = new XMLHttpRequest();

    xhr.open('POST', form.action, true);
    xhr.send(formData);
}
</code>
Copy after login
Copy after login

PS2:再附抓包图

base64的抓包
javascript - 表单如何提交base64的格式的图片?
正常post提交表单文件的抓包
javascript - 表单如何提交base64的格式的图片?

回复内容:

后端是用PHP的$_FILES变量获取提交的文件。

正常的表单提交是这样。

<code><h2>正常表单提交,enctype=multipart/form-data</h2>
  <form action="upload.php" method="post" enctype="multipart/form-data" id="form-1">
  <label for="file-1">file</label>
  <input type="file" name="file" id="file-1">
  <input type="submit" value="submit">
</form> 
</code>
Copy after login
Copy after login

我这里的情况是,上传的文件,是来自外部的一串base64字符串,这里该如何转变,才能实现模拟表单提交,后台不需要更改代码。

PS:
我尝试把base64放在FormData对象里面,但后台的$_FILES变量依旧不能识别

<code>function sendFormByBase64(){
    var form = document.getElementById('form-2');
    var formData = new FormData();

    var base64 ='/* 这里面是base64字符串 */';

    formData.append('file', base64);

    var xhr = new XMLHttpRequest();

    xhr.open('POST', form.action, true);
    xhr.send(formData);
}
</code>
Copy after login
Copy after login

PS2:再附抓包图

base64的抓包
javascript - 表单如何提交base64的格式的图片?
正常post提交表单文件的抓包
javascript - 表单如何提交base64的格式的图片?

你这个问题我刚刚遇到了,但我用tornado+ajax,希望对你有帮助
base64的图片数据,你直接用普通表单(xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded ");),当作字符串传后服务器就可以了,但是因为一些特殊字符的表单数据很危险,所以要进行url编码encodeURIComponent()

<code>function sendimg(b64img){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status </code>
Copy after login

服务器接受到表单nameimg的数据即为url编码后的base64数据,解码后就是你要的
关于ajax和后台处理的代码可以看看我的小项目:)

Ps:木有看时间,题主在上半年提问的QAQ, 现在问题应该已经解决了~ o(∩∩)o...

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template