请求为空 laravel ajax 多张图片
Request is empty laravel ajax multiple images
所以我有一些功能代码,但我需要向其中添加多个图像上传。我用了this plugin。现在我的 HTML 看起来像这样:
<form class="form-horizontal full-width pull-left m-t-20" name="myForm" ng-if="showForm">
<div class="form-group">
<label for="Naam" class="col-sm-3 control-label">Naam</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Naam" ng-model="addForm.name" placeholder="Naam">
</div>
</div>
<div class="form-group">
<div class="imageselect col-sm-3">
Afbeeldingen
<input type="file" ngf-select ng-model="files" ngf-multiple="true" accept="image/*" />
Drop afbeeldingen: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
</div>
<div class="col-sm-9">
<div ng-repeat="file in files" class="imagepreview">
<img ng-show="myForm.file.$valid" ngf-thumbnail="file" class="thumb"><br /> <button ng-click="file = null" class="thumbremove" ng-show="file">Verwijder</button>
</div>
</div>
</div>
<div class="form-group">
<span class="progress" ng-show="files.progress >= 0">
<div style="width:<< files.progress >>%" ng-bind="files.progress + '%'"></div>
</span>
<div class="col-sm-10">
<button type="submit" ng-click="addStore(files)" class="btn btn-default">Opslaan</button>
</div>
</div>
</form>
这是我的 javascript 代码:
.controller('StoresController', ['$scope', '$http', 'handlerService', 'Upload', '$timeout', function($scope, $http, handlerService, Upload, $timeout) {
$scope.model = {};
$scope.model.stores = stores;
$scope.showForm = true;
$scope.addForm = {};
$scope.addForm.name = '';
$scope.addStore = function(files) {
$scope.showForm = true;
files.upload = Upload.upload({
method: 'POST',
url: 'http://localhost:8000/stores/add/',
data: {store : $scope.addForm, files: files},
});
files.upload.then(function (res) {
$timeout(function () {
handlerService.isValid(res.data);
if(res.data.isValid == true) {
$scope.showForm = false;
$scope.addForm = {};
}
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
// Math.min is to fix IE which reports 200% sometimes
files.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}])
以及后端部分:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use DB;
class StoresController extends Controller
{
public function add(Request $request) {
$files = array();
foreach($_FILES as $file) {
$filename = $file['name'];
$files[] = $file['name'];
$destination = '../public/assets/img/stores/' . $filename;
move_uploaded_file($file['tmp_name'] , $destination );
}
$store = $request->store;
$store['images'] = json_encode($files);
$isValid = false;
if(isset($store['name']) && $store['name'] != '') {
DB::table('stores')->insert(
$store
);
$isValid = true;
$message = 'store is added.';
} else {
$message = json_encode($request->all());
$isValid = false;
}
$result = [
'isValid' => $isValid,
'message' => $message
];
return json_encode($result);
}
}
但是整个请求都是空的。没有文件上传部分,我可以毫无问题地添加商店。当我检查我的 AJAX 请求时,我还可以看到负载与商店和图像一起发送。我做错了什么?
我需要提供 resumeSizeUrl
或 resumeSize
,以检查文件的进度。在我这样做之后,我的文件发送没有问题。
后端部分也不对。为了上传文件,我使用了 laravel 的请求 class。这是当前的后端代码:
public function add(Request $request) {
$isValid = true;
DB::beginTransaction();
$store = $request->store;
if(isset($store['name']) && $store['name'] != '') {
$id = DB::table('stores')->insertGetId(
$store
);
} else {
$message = 'Naam mag niet leeg zijn';
$isValid = false;
}
if($isValid === true) {
// getting all of the post data
$files = $request->file('files');
// Making counting of uploaded images
$path = 'stores'.'/'.$id;
$file_count = count($files);
// start count how many uploaded
$uploadcount = 0;
foreach($files as $file) {
$rules = array('file' => 'mimes:png,gif,jpeg'); //'required|txt,pdf,doc'
$validator = Validator::make(array('file'=> $file), $rules);
if($validator->passes()) {
$destinationPath = 'img/'.$path.'/';
$filename = $file->getClientOriginalName();
$upload_success = $file->move($destinationPath, $filename);
$uploadcount ++;
} else {
$message = 'Alleen afbeeldingen zijn toegestaan';
$isValid = false;
}
}
if($isValid == true) {
if($uploadcount != $file_count) {
$message = 'Niet alle bestanden zijn geupload';
$isValid = false;
}
}
}
if($isValid == true) {
DB::commit();
$message = 'Store Toegevoegd!';
}
if($isValid == false) {
DB::rollBack();
}
$result = [
'isValid' => $isValid,
'message' => $message
];
return json_encode($result);
}
所以我有一些功能代码,但我需要向其中添加多个图像上传。我用了this plugin。现在我的 HTML 看起来像这样:
<form class="form-horizontal full-width pull-left m-t-20" name="myForm" ng-if="showForm">
<div class="form-group">
<label for="Naam" class="col-sm-3 control-label">Naam</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="Naam" ng-model="addForm.name" placeholder="Naam">
</div>
</div>
<div class="form-group">
<div class="imageselect col-sm-3">
Afbeeldingen
<input type="file" ngf-select ng-model="files" ngf-multiple="true" accept="image/*" />
Drop afbeeldingen: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
</div>
<div class="col-sm-9">
<div ng-repeat="file in files" class="imagepreview">
<img ng-show="myForm.file.$valid" ngf-thumbnail="file" class="thumb"><br /> <button ng-click="file = null" class="thumbremove" ng-show="file">Verwijder</button>
</div>
</div>
</div>
<div class="form-group">
<span class="progress" ng-show="files.progress >= 0">
<div style="width:<< files.progress >>%" ng-bind="files.progress + '%'"></div>
</span>
<div class="col-sm-10">
<button type="submit" ng-click="addStore(files)" class="btn btn-default">Opslaan</button>
</div>
</div>
</form>
这是我的 javascript 代码:
.controller('StoresController', ['$scope', '$http', 'handlerService', 'Upload', '$timeout', function($scope, $http, handlerService, Upload, $timeout) {
$scope.model = {};
$scope.model.stores = stores;
$scope.showForm = true;
$scope.addForm = {};
$scope.addForm.name = '';
$scope.addStore = function(files) {
$scope.showForm = true;
files.upload = Upload.upload({
method: 'POST',
url: 'http://localhost:8000/stores/add/',
data: {store : $scope.addForm, files: files},
});
files.upload.then(function (res) {
$timeout(function () {
handlerService.isValid(res.data);
if(res.data.isValid == true) {
$scope.showForm = false;
$scope.addForm = {};
}
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
// Math.min is to fix IE which reports 200% sometimes
files.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}])
以及后端部分:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use DB;
class StoresController extends Controller
{
public function add(Request $request) {
$files = array();
foreach($_FILES as $file) {
$filename = $file['name'];
$files[] = $file['name'];
$destination = '../public/assets/img/stores/' . $filename;
move_uploaded_file($file['tmp_name'] , $destination );
}
$store = $request->store;
$store['images'] = json_encode($files);
$isValid = false;
if(isset($store['name']) && $store['name'] != '') {
DB::table('stores')->insert(
$store
);
$isValid = true;
$message = 'store is added.';
} else {
$message = json_encode($request->all());
$isValid = false;
}
$result = [
'isValid' => $isValid,
'message' => $message
];
return json_encode($result);
}
}
但是整个请求都是空的。没有文件上传部分,我可以毫无问题地添加商店。当我检查我的 AJAX 请求时,我还可以看到负载与商店和图像一起发送。我做错了什么?
我需要提供 resumeSizeUrl
或 resumeSize
,以检查文件的进度。在我这样做之后,我的文件发送没有问题。
后端部分也不对。为了上传文件,我使用了 laravel 的请求 class。这是当前的后端代码:
public function add(Request $request) {
$isValid = true;
DB::beginTransaction();
$store = $request->store;
if(isset($store['name']) && $store['name'] != '') {
$id = DB::table('stores')->insertGetId(
$store
);
} else {
$message = 'Naam mag niet leeg zijn';
$isValid = false;
}
if($isValid === true) {
// getting all of the post data
$files = $request->file('files');
// Making counting of uploaded images
$path = 'stores'.'/'.$id;
$file_count = count($files);
// start count how many uploaded
$uploadcount = 0;
foreach($files as $file) {
$rules = array('file' => 'mimes:png,gif,jpeg'); //'required|txt,pdf,doc'
$validator = Validator::make(array('file'=> $file), $rules);
if($validator->passes()) {
$destinationPath = 'img/'.$path.'/';
$filename = $file->getClientOriginalName();
$upload_success = $file->move($destinationPath, $filename);
$uploadcount ++;
} else {
$message = 'Alleen afbeeldingen zijn toegestaan';
$isValid = false;
}
}
if($isValid == true) {
if($uploadcount != $file_count) {
$message = 'Niet alle bestanden zijn geupload';
$isValid = false;
}
}
}
if($isValid == true) {
DB::commit();
$message = 'Store Toegevoegd!';
}
if($isValid == false) {
DB::rollBack();
}
$result = [
'isValid' => $isValid,
'message' => $message
];
return json_encode($result);
}