Maison > développement back-end > tutoriel php > javascript - JQuery 如何传递input file的内容至PHP进行处理

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

WBOY
Libérer: 2016-06-06 20:18:32
original
1437 Les gens l'ont consulté

今天问题高产似母猪...

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

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

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

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

回复内容:

今天问题高产似母猪...

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

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

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

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

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

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

方法一:表单就是FormData

HTML代码:

<code><form id="fileform">
    <input type="file" name="file">
</form>
</code>
Copier après la connexion

JS代码:

<code>var formElement = document.getElementById("fileform");
//jQuery可以像这样:
//var formElememt = $("#fileform")[0];
var formData = new FormData(formElement);
</code>
Copier après la connexion

方法二:自己构造

HTML代码:

<code><input type="file" id="file">
</code>
Copier après la connexion

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>
Copier après la connexion

用jQuery发送请求

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

参考

MDN是个好东西,要学会用

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal