我已经有了一些可用代码,但我需要添加多个图像上传功能。我使用了这个插件。现在我的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请求时,我也可以看到有效载荷与商店和图像一起发送。我做错了什么?
if(Request::ajax())
来查看控制器是否收到任何请求。 - Peyman.HAccess-Control-Allow-Origin
头吗? - Bolovsky