Question

我有一个页面上有一个表单。我需要在页面上包含的一件事是上传文件的能力。我试图通过使用其中的另一个表单来做到这一点。当用户选择文件时，我想获取文件名，然后执行实际上传。根据我的阅读，我无法在表单中提交表单，因为内部表单中的提交按钮也将提交外部表单。我试过寻找选项并找到了以下页面。

Can I trigger a form submit from a controller?

我认为如果我使用这种类型的指令，然后提交它，那么它应该工作....我的问题是，由于某种原因，当我尝试访问我的控制器中的表单时，它显示如未定义。我想我需要这个表单，以便我可以获得所选文件的文件名...可能有一种不同的方式来实现这一点，而不是我尝试但我还没有找到它...

最新的控制器，指令和HTML文件如下。

Controller:
$scope.uploadIt = function($form) {
    console.log($form);
    if ($form.$valid) {
       $form.commit();
    }
};

HTML:
<form editable-form name="editableForm" onaftersave="update" >
   <tr>
       :  other fields here....
   </tr>
   <tr>
      <td>
        <form  ng-form-commit name='fileForm' action="scripts/upload_file.php" method="post" enctype="multipart/form-data">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="file" name="file">
            <p class="help-block">Upload a file to link it with this project.</p>
            <input type="text" name="prgGuid" id="prgGuid" value="{{programId}}" style="display:none;">
            <input type="button" ng-click="uploadIt(fileForm)" name="submit" value="Upload File" class="btn btn-default">
        </form>
    </td>
  </tr>
</form>

Directive:
app.directive("ngFormCommit", [function(){
  return {
    require:"form",
    link: function($scope, $el, $attr, $form) {
        $form.commit = function() {
            $el[0].submit();
        };
    }
};

}]）;

我需要做的另一件事......当文件实际上传时，我实际上会更改文件名，因此它是唯一的。上传文件后，我需要将新文件名传回给我的控制器，以便我可以存储/显示它。所以我需要用户选择的原始名称和新名称...我的php文件会将其传回。我起初在想，也许我可以使用$ http.post提交表单并获取信息，但我无法获得用户选择的文件名。我在想是否可以使用http.post处理php文件，然后我就不会遇到表单中的表单，提交问题。

有人可以告诉我完成上传文件的最简单方法吗？我一直在尝试各种各样的帖子，但我在这里找不到类似的东西....请帮忙。感谢。

Angularjs在表单中提交表单以进行文件上传

0 个答案: