javascript – JQuery 如何传递input file的内容至PHP进行处理

今天问题高产似母猪…

通过下列代码，我已经获取了 filemeta 也就是被选中的那个文件。

<code>    $('#coverfile').on('change', '', function() {        var filemeta = $('#coverfile').prop('files')[0];    });</code>

然后我有一个btn按钮，需要通过点击后ajax的方式传递这个被选中的图片，然后在php文件中进行处理。
但是我不知道应该怎么去传递这个获取过来的filemeta

本来我想传递base64过去的，因为预览图片我使用的是转换为base64进行预览的，但是这个转换后的字节太大了，php文件字节报500错误，所以我得换个办法…

回复内容：

今天问题高产似母猪…

通过下列代码，我已经获取了 filemeta 也就是被选中的那个文件。

<code>    $('#coverfile').on('change', '', function() {        var filemeta = $('#coverfile').prop('files')[0];    });</code>

然后我有一个btn按钮，需要通过点击后ajax的方式传递这个被选中的图片，然后在php文件中进行处理。
但是我不知道应该怎么去传递这个获取过来的filemeta

本来我想传递base64过去的，因为预览图片我使用的是转换为base64进行预览的，但是这个转换后的字节太大了，php文件字节报500错误，所以我得换个办法…

用FormData对象提交。注意IE只有版本10以上支持。

FormData对象怎么来呢，有两种方法。

方法一：表单就是FormData

HTML代码：

<code>    </code>

JS代码：

<code>var formElement<mark>6来源gaodaimacom搞#^代%!码网</mark><strong>搞gaodaima代码</strong> = document.getElementById("fileform");//jQuery可以像这样：//var formElememt = $("#fileform")[0];var formData = new FormData(formElement);</code>

方法二：自己构造

HTML代码：

<code></code>

JS代码：

<code>var fileInput = document. getElementById("file");//用jQuery可以这样：//var fileInput=$("#file")[0];var file = fileInput.files[0];    //获得File对象(也就是你那个filemeta)，这里文件是单选的，如果是多选的需要遍历fileInput.files属性来获取每一个文件var formData = new FormData();formData.append("file", file);    //FormData对象的append方法第一个参数相当于input的name属性，第二个参数就是value，可以是File对象</code>

用jQuery发送请求

<code>$.ajax({    type: "POST",    //必须POST    url: "http://example.com",    //接收请求的URL    processData: false,    //必须设置    contentType: false,    //必须设置    data: formData    //直接把formData对象作为data属性的值发送    //其他参数参数自行设置})</code>

参考

MDN是个好东西，要学会用

https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

喜欢 (0)赏

[搞代码]

分享 (0)