Ajax multipart/form-data 方法给出错误
Posted
技术标签:
【中文标题】Ajax multipart/form-data 方法给出错误【英文标题】：Ajax multipart/form-data method gives error 【发布时间】：2019-02-26 14:22:31 【问题描述】：上传multipart/form-data 表单时出现错误，我有两个输入获取一个图像和一个pdf。
这里是html代码
<form class="form-group" id="form-add" >
<input name="title" size="30" class="form-control margin-bottom-25" id="title" placeholder="Enter Title" spellcheck="true" autocomplete="off" type="text" />
<input name="code" size="30" class="form-control margin-bottom-25" id="code" placeholder="Enter Course Code" spellcheck="true" autocomplete="off" type="text" />
<div class="wp-media-buttons"><input type="file" id="image_select" name="image" class="form-control margin-bottom-50" ></div>
<div class="wp-media-buttons"><input type="file" name="pdf" id="pdf_select" class="form-control margin-bottom-50" ></div>
<div class="col-md-6"><input type="text" id="batch" name="batch" class="form-control margin-bottom-25" placeholder="Enter Batch Size" /></div>
<div class="margin-bottom-25 col-md-6"><select id="batch-dec" name="batch-dec" class="form-control margin-bottom-25">
<option >Select</option>
<option value="Batch Size">Batch Size</option>
<option value="Field Work">Field Work</option>
<option value="Project">Project</option>
</select></div>
<div class=" col-md-6">
<input type="text" id="duration" name="duration" class="form-control margin-bottom-25" spellcheck="true" placeholder="Enter Duration"/></div>
<div class="col-md-6">
<select id="duration-dec" name="duration-dec-dec" class="form-control margin-bottom-25">
<option >Select</option>
<option value="Time Duration">Time Duration</option>
<option value="Class Room">Field Work</option>
</select>
</div>
<div class="clearfix"></div>
<div class="margin-bottom-25">Add Course Description Below</div>
<div id="editor-container" class="editor-container margin-bottom-25" style="position:relative">
<textarea spellcheck="true" class="editor-area form-control margin-bottom-25" style="height: 326px; margin-top: 37px;" cols="40" name="content" id="content" aria-hidden="false"></textarea>
</div>
<input class="btn btn-primary publish" type="submit" name="submit" id="publish" value="Publish" />
</form>
Ajax 代码
$(document).ready(function()
$(document).on('click', '#publish', function()
/*var code = $('#code').val();
var title= $('#title').val();
var image= $('#image_select').files[0];
var pdf= $('#pdf_select').files[0];
var batch = $('#batch').val();
var batch_dec = $('#batch-dec').val();
var duration = $('#duration').val();
var duration_dec = $('#duration-dec').val();
var content = $('#content').val();
if($(document).on('click','#draft'))
var status = $('#draft').val();
else if(($(document).on('click','#publish')))
var status =$('#publish').val();
var status =$('#publish').val();
var formdata = new FormData();
formdata.append('code',code);
formdata.append('title',title);
formdata.append('image',image);
formdata.append('pdf',pdf);
formdata.append('batch',batch);
formdata.append('batch_dec',batch_dec);
formdata.append('duration',duration);
formdata.append('duration_dec',duration_dec);
formdata.append('content',content);
formdata.append('status',status);*/
//alert(formdata);
var formdata = new FormData($('#form-add')[0]);
formdata.append('image',$('#image_select')[0].files[0] );
formdata.append('pdf',$('#pdf_select')[0].files[0]);
$.ajax(
url:"include/courses-add.php",
// method:"POST",
type:'post',
enctype:'multipart/form-data',
data:formdata,
contentType:false,
cache:false,
processData: false,
success:function(data)
alert(data);
$('#result').html("<div class='alert alert-success'>"+data+"</div>");
,
error:function(e)
console.log('error:',e);
);
);
);
我使用相同的方法分别添加文件和其他数据它工作正常，但我需要以相同的形式发布这两个数据。得到一个类似
的 console.log错误： 对象 readyState：0，getResponseHeader：getResponseHeader（），getAllResponseHeaders：getAllResponseHeaders（），setRequestHeader：setRequestHeader（），overrideMimeType：overrideMimeType（），statusCode：statusCode（），abort：abort（），state：state（），总是：总是（），然后：然后（），...
可以看到在 javascript 中尝试了很多代码仍然给出错误，发布只是提交但是
ajax 块不起作用，它在控制台中引发错误。
【问题讨论】：
检查浏览器开发工具中的网络选项卡以查看当您进行此 ajax 调用时服务器的实际响应。 通过阻止默认方法 e.preventDefault(); 工作正常； 【参考方案1】：使用简单的ajaxSubmit：
https://github.com/claviska/jquery-ajaxSubmit
$('#postreportform').on('submit', function (e)
var postreportform = $(this);
e.preventDefault();
$(this).ajaxSubmit(
success: function (data)
.....
,
error: function (jqXhr)
.....
);
);
【讨论】：
【参考方案2】： $("#form-add").on('submit', (function(e)
e.preventDefault();
var code = $('#code').val();
var title= $('#title').val();
var image= $('#image_select').files[0];
var pdf= $('#pdf_select').files[0];
var batch = $('#batch').val();
var batch_dec = $('#batch-dec').val();
var duration = $('#duration').val();
var duration_dec = $('#duration-dec').val();
var content = $('#content').val();
var status =$('#publish').val();
var formdata = new FormData(this);
formdata.append('code',code);
formdata.append('title',title);
formdata.append('image',image);
formdata.append('pdf',pdf);
formdata.append('batch',batch);
formdata.append('batch_dec',batch_dec);
formdata.append('duration',duration);
formdata.append('duration_dec',duration_dec);
formdata.append('content',content);
formdata.append('status',status);
$.ajax(
url:"include/courses-add.php",
// method:"POST",
type:'post',
enctype:'multipart/form-data',
data:formdata,
contentType:false,
cache:false,
processData: false,
success:function(data)
alert(data);
$('#result').html("<div class='alert alert-success'>"+data+"</div>");
,
error:function(e)
console.log('error:',e);
);
));
【讨论】：
以上是关于Ajax multipart/form-data 方法给出错误的主要内容，如果未能解决你的问题，请参考以下文章
TinyMCE 的 multipart/form-data、ajax 和 textarea 问题
Ajax multipart/form-data 方法给出错误
JSF：使用 multipart/form-data 和 AJAX 时出现奇怪的 iframe
如何使用 multipart/form-data 进行 ASP.NET MVC Ajax 表单发布？