Question

我正在开发一个电子商务网站，其中登录的管理员需要添加新产品。产品表格包含产品描述和产品图片上传。我想要的是捕获角度控制器中的所有表单数据，并将它们传递给要处理的服务。到目前为止，我失败了。

以下是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">

表单是角度函数的包装器。 NG-提交= “addprovm.CreateProduct（）”

在我的控制器中，我有以下内容 -

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);
    }
}

这里我想在我发送表单数据并验证（如果需要）之前将它们发送到服务，然后服务获取此数据并将其传递给php脚本进行处理。我想让我的php脚本上传将映像文件移动到某个位置，并将产品信息插入到mysql数据库中。有人可以帮忙吗？提前致谢。干杯。

Answer 1

这个简单的上传文件，也许可以帮助你，返回一个具有文件状态的对象。您可以在INSERT查询之前添加一个函数来调用此文件。

<?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]));
        }
    }
?>

Answer 2

你可以尝试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);
        });
    };

Angular js文件上传到php服务器

2 个答案: