关于javascript：通过AJAX传递图像

Pass an image through AJAX

本问题已经有最佳答案，请猛点这里访问。

基本上，我想在提交表单时通过Ajax传递一个图像文件，并检索图像并通过电子邮件将其作为附件文件发送：

这是表格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<form role="form" action="" name="devis" id="devis" method="post" enctype="multipart/form-data" class="form-horizontal">
<fieldset>

<label class="control-label col-md-4" for="societe">Company</label>

<input type="text" class="form-control input-md col-md-8" name="societe" value="" maxlength="" id="societe">

<label class="control-label col-md-4" for="message"><span class="required">* </span>Message</label>

<textarea rows="5" name="message" class="form-control input-md col-md-8" maxlength="" required="" style="resize:none;" id="message"></textarea>

<label class="control-label col-md-4" for="image_input_field">Logo</label>

<span class="input-group-btn">
<span class="btn btn-default btn-file">
Parcourir <input type="file" id="image_input_field" name="file">
</span>
</span>
<input type="text" class="form-control" readonly="">

<input type="submit" value="Envoyer" name="" class="btn btn-primary" id="submit">
<input type="reset" value="Annuler" name="" class="btn btn-default" id="reset">

</fieldset>
</form>

我似乎找不到我的代码中的错误！以下是Ajax调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

jQuery(document).on("click","#submit", function(e) {
e.preventDefault();
var fileInput = document.getElementById('image_input_field');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
// console.log(file);

var societe = $("input#societe").val();
var message = $("textarea#message").val();
jQuery.ajax({
url:"ajax.php",
type:"post",
data: {
'file': file,
'module' : 'ajax_data_form',
'societe': societe,
'message': message
},
cache: false,

success: function(reponse) {
if(reponse) {
alert(reponse);
// console.log(reponse);
// jQuery('#devis').trigger("reset");
} else {
alert('Erreur');
}
}
});
});

这里是ajax.php：

1
2
3
4
5

<?php
if( isset($_POST['module']) && $_POST['module'] =="ajax_data_form" )
{
var_dump($_FILES);
}

相关讨论

1
2
3
4
5
6
7
8
9
10

$.ajax({
type:"POST",
url: pathname,
data: new FormData($('#devis')[0]),
processData: false,
contentType: false,
success: function (data) {
$("#divider").html(data);
}
});

在$_FILES[];中正常获取文件数据

相关讨论

你能试试吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在AJAX.PHP中

只写

1	echo 'something';

相关讨论

正如您可能已经知道的，通过Ajax调用处理文件上载是不可能的，一旦HTML5文件I/O API准备好并由主要浏览器实现，就可能实现。

您可以使用jquery iframe post表单插件在iframe中发布数据，这样用户体验将类似于Ajax调用(页面的部分更新)。

链接如下：https://github.com/dogzworld/iframe-post-form

描述："这个jquery-ajax上传插件创建一个隐藏的iframe，并将表单的target属性设置为发布到该iframe。提交表单时，它将被发布(包括文件上载)到隐藏的iframe。最后，插件从iframe收集服务器的响应。"

如前所述，您可以从服务器发送响应并相应地在您的网页上显示更新。必须有一个演示页面，但现在还不能工作。

您也可以将其用于文件上载。

调用示例：

1
2
3
4
5
6
7
8
9
10
11

jQuery('#frmId').iframePostForm({
json : true,
post : function () {
//return true or false
return true;
},
complete : function (response) {
//complete event
console.log(response);
}
});

使用名为jquery form plugin link的jquery插件

我建议您只需使用jquery提交表单，以及您希望保存在隐藏字段中的任何数据。

1 2	$("#devis").ajaxSubmit(options); return false;

您可以很容易地在php页面中得到这样的文件

1
2
3

$ImageTempname = $_FILES['ImageFile']['tmp_name'];
$ImageFilename = $_FILES['ImageFile']['name'];
$ImageType = $_FILES['ImageFile']['type'];

等等…

相关讨论