拉拉维尔上传表单返回 json

Question

我仍然是Laravel的初学者，并坚持使用上传ajax表单：它仍然发送浏览器中显示的json响应，而不是像我期望的那样停留在当前页面上。 我只想得到一个可以在当前页面上使用的 json 响应。

这是我的观点

<form action="/Project/UploadDocumentProject" enctype="multipart/form-data"  method="post"  id ="form0">
{{ csrf_field() }}
<input id="ProjectID" name="ProjectID" type="hidden" value="{{$Project->id}}">
<div class="form-group">
<input name="DocumentFile" id="DocumentFile" class="form-control" type="file" >
</div>

<div class="form-group">
<button id ="test" class="btn btn-success upload-image" type="submit">Upload</button>
</div>
</form>

这是我的 ajax 请求

$('#form0').on("submit", function(e){
e.preventDefault();
$(this).ajaxForm(options);
var options = { 
complete: function(response) 
{
if($.isEmptyObject(response.responseJSON.error)){
$("input[name='DocumentFile']").val('');
alert('Image Upload Successfully.');
}else{
printErrorMsg(response.responseJSON.error);
}
}
};

}(;

这是我的控制器

public function UploadDocumentProject (Request $Request)
{
$ProjectID=$Request->get('ProjectID');
$filename = $Request->DocumentFile->getClientOriginalName();
$Request->DocumentFile->storeAs('/public/projects/'.$ProjectID.'/files',$filename);
return response()->json(['success'=>'done']);
}

这是我的路线

Route::post('/Project/UploadDocumentProject','ProjectController@UploadDocumentProject');

我已经尝试在我的表单中指定 data-ajax="true" data-ajax-method="POST"，但是即使在我的 ajax 请求中指定数据字段时，请求也不会考虑文件输入。 谁能帮我？

谢谢！ :)

Answer 1

您需要指定options，然后才能使用它.ajaxForm(options)。 我会在加载后直接配置它，而不是在提交处理程序中配置

重新设计的 JS 代码：

$.ready(function(){
var options = { 
complete: function(response)
{
if($.isEmptyObject(response.responseJSON.error)){
$("input[name='DocumentFile']").val('');
alert('Image Upload Successfully.');
}else{
printErrorMsg(response.responseJSON.error);
}
}
};
$(this).ajaxForm(options);
}};

如果在没有目标后端 php 应用程序的情况下对其进行测试 - 但发送了包含文件的请求。因此，如果您遇到其他问题，请告诉我

Answer 2

终于找到了如何制作正确的ajax文件格式

这是我是如何做到的

视图

<form action="{{ route('Project/UploadDocumentProject') }}"  method="post" id ="form0" enctype="multipart/form-data" >
{{ csrf_field() }}
<input id="ProjectID" name="ProjectID" type="hidden" value="{{$Project->id}}">

<div class="form-group">
<input name="fileAjax" id="fileAjax" class="form-control" type="file">test</textarea>  
</div>
<div class="form-group">
<button id ="test" class="btn btn-success upload-image" type="submit" >Upload</button>
</div>

</form>

阿贾克斯请求

var files;

$('input[type=file]').on('change', prepareUpload);

function prepareUpload(event)
{
files = event.target.files;
}
$("#form0").submit(function (e) {
e.preventDefault();
var form = $("#form0");
var data = new FormData();
$.each(files, function(key, value)
{
data.append(key, value);
});
var $ProjectID = $('#ProjectID').val();
data.append('ProjectID', $ProjectID);
$.ajax({
type: "post",
url: form.attr('action'),
data: data,
processData: false,
contentType: false,
cache: false,
enctype: 'multipart/form-data',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},

success: function (data) {
//some code here...
}
});
});

控制器

public function UploadDocumentProject (Request $Request) {
$path = $Request->file('0')->store('document');
$filename = $Request->file('0')->getClientOriginalName();
$Request->file('0')->storeAs('/public/projects/files',$filename);
//some code here...
return Response::json(array('var1'=>$val1 ,...));
}

路线

Route::post('Project/UploadDocumentProject', ['as'=>'Project/UploadDocumentProject','uses'=>'ProjectController@UploadDocumentProject']);