上传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(),始终: always(),然后:then(),...}
在JavaScript中可以看到仍然尝试了许多代码,但仍给出错误,只是提交而已
ajax块不起作用,它在控制台中引发错误。
答案 0 :(得分:1)
使用简单的ajaxSubmit:
$('#postreportform').on('submit', function (e) {
var postreportform = $(this);
e.preventDefault();
$(this).ajaxSubmit(
{
success: function (data) {
.....
},
error: function (jqXhr) {
.....
}
});
});
答案 1 :(得分:0)
$("#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);
}
});
}));