基本上我想在提交表单时传递带有ajax的图像文件并检索图像并通过电子邮件将其作为附件发送:
这是表单:
<form role="form" action="" name="devis" id="devis" method="post" enctype="multipart/form-data" class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="control-label col-md-4" for="societe">Company</label>
<div class="col-md-8">
<input type="text" class="form-control input-md col-md-8" name="societe" value="" maxlength="" id="societe">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="message"><span class="required">* </span>Message</label>
<div class="col-md-8">
<textarea rows="5" name="message" class="form-control input-md col-md-8" maxlength="" required="" style="resize:none;" id="message"></textarea>
</div>
</div>
<div class="form-group" id="input_file">
<label class="control-label col-md-4" for="image_input_field">Logo</label>
<div class="col-md-8">
<div class="input-group uploaddiv">
<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="">
</div>
</div>
</div>
<div class="form-group">
<div class="form-actions col-md-9 col-md-offset-3 text-right">
<input type="submit" value="Envoyer" name="" class="btn btn-primary" id="submit">
<input type="reset" value="Annuler" name="" class="btn btn-default" id="reset">
</div>
</div>
</fieldset>
</form>
我似乎无法找到代码中的错误!这是 AJAX调用:
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 :
<?php
if( isset($_POST['module']) && $_POST['module'] == "ajax_data_form" )
{
var_dump($_FILES);
}
答案 0 :(得分:11)
$.ajax({
type: "POST",
url: pathname,
data: new FormData($('#devis')[0]),
processData: false,
contentType: false,
success: function (data) {
$("#divider").html(data);
}
});
并在$_FILES[];
答案 1 :(得分:2)
<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function() {
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();
$.ajax({
url: "ajax.php",
type: "POST",
data: "file="+file,
cache: false,
success: function(reponse) {
if(reponse) {
alert(reponse);
// console.log(reponse);
// $('#devis').trigger("reset");
} else {
alert('Erreur');
}
}
});
}); });
</script>
在ajax.php中
写一下
echo 'something';
答案 2 :(得分:0)
使用Jquery插件调用Jquery表单插件Link
我建议只使用jquery提交表单,你想要的数据可以将它们保存在隐藏的字段中。
$("#devis").ajaxSubmit(options);
return false;
你可以像这样轻松地在php页面中获取文件
$ImageTempname = $_FILES['ImageFile']['tmp_name'];
$ImageFilename = $_FILES['ImageFile']['name'];
$ImageType = $_FILES['ImageFile']['type'];
依旧.....
答案 3 :(得分:0)
正如您可能已经知道的那样,无法通过ajax调用处理文件上传,一旦HTML5 FILE I/O Api准备好并由主流浏览器实现,就可以实现。
您可以使用jQuery iframe post form插件在iframe中发布数据,因此用户体验类似于ajax调用(页面的部分更新)。
这是链接: https://github.com/dogzworld/iframe-post-form
说明:&#34;此jQuery ajax上传插件会创建隐藏的iframe,并将表单的目标属性设置为发布到该iframe。提交表单时,会将其发布(包括文件上传)到隐藏的iframe。最后,该插件从iframe收集服务器的响应。&#34;
如上所述,您可以从服务器发送响应并相应地在您的网页上显示更新。 必须有一个演示页面,但它现在不起作用。
您也可以将其用于文件上传。
致电示例:
jQuery('#frmId').iframePostForm({
json : true,
post : function () {
//return true or false
return true;
},
complete : function (response) {
//complete event
console.log(response);
}
});