[英]Angular js file upload to php server
我正在開發一個電子商務網站,登錄的管理員需要在其中添加新產品。 產品表格有產品描述和產品圖片上傳。 我想捕獲 angular controller 中的所有表單數據,並將它們傳遞給服務進行處理。 到目前為止我都失敗了。
這是 HTML 標記:
<label for="product_name">Product name</label>
<input id="product_name" type="text" ng-model="addprovm.product.name">
<input id="product_img" type="file" ng-model="file" name="file">
該表單是 angular function 中的包裝器。ng ng-submit="addprovm.CreateProduct()"
在我的 controller 中,我有以下內容:
function addproductCtrl($http){
var addprovm = this;
// product details.
addprovm.product = {
name: "",
price: "",
category: "",
product_img: ""
};
// submit button function.
addprovm.CreateProduct = function(){
console.log(addprovm.product);
}
}
在這里,我想console.log
表單數據並在將它們發送到服務之前進行驗證(如有必要),然后該服務獲取此數據並將其傳遞給 php 腳本進行處理。
如何讓我的 php 腳本將圖像文件上傳到某個位置,並將產品信息插入到 mysql 數據庫?
這是一個簡單的上傳文件,也許可以幫助你,返回一個 object 和文件的狀態。 您可以在 INSERT 查詢之前添加一個 function 來調用此文件。
<?php include_once("../conection.php");?>
<?php
if(isset($_FILES['file'])){
$errors = array();
$file_name = $_FILES['file']['name'];
$file_size = $_FILES['file']['size'];
$file_tmp = $_FILES['file']['tmp_name'];
$file_type = $_FILES['file']['type'];
$file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
$extensions = array("jpg","jpeg","png");
if(in_array($file_ext, $extensions) === false){
$errors[]="Is not a valid File.";
}
$path = dirname(__FILE__) . '/products/';
if(file_exists($path.'/'.$file_name)) {
$errors[] = "This file has already been uploaded.";
}
if (!file_exists($path)) {
mkdir($path, 0777, true);
}
if(empty($errors) == true){
move_uploaded_file($file_tmp, $path.'/'.$file_name);
echo (json_encode(['file' => $file_name]));
}else{
echo(json_encode(['errores' => $errors]));
}
}
?>
您可以嘗試ng-file-upload ;) 並且易於使用
$scope.upload = function (file) {
Upload.upload({
url: 'upload/url',
data: {file: file, 'username': $scope.username}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.