Question

我正在尝试创建一个AngularJS表单。表单的一部分是从文件中获取Base64并将其存储到我的$scope.user。但是，单击文件上载输入并选择我的文件是提交我的表单，这不应该发生。

这是我的表格：

<form ng-submit="processForm()" name="merchApp"  style="position:relative">
    <div class="form-section" ui-view>
        <div class="row">
        <div class="col-sm-12 text-center">


        <button href="#" ng-click='docUpload("userId")'>Upload File</button>&nbsp;{{user.uploadIdName}}
        <br/>* Accepted file types: .jpg, .png, .gif, .pdf, .doc, .docx
        <br/>
        (Max file size: 2MB)
        <br/>
        <input ng-model="user.uploadId" type="hidden" value="{{user.uploadId}}" required>


    <br/><br/>
    <button type="submit" class="next" ng-disabled="merchApp.$invalid">SUBMIT APPLICATION</button>
</div>
</div>
</div>   
</form>

这是我的app.js

.controller('formController', ['$scope', '$http', '$parse', function($scope, $http, $parse) {

// we will store all of our form data in this object
$scope.user = {};

$scope.docUpload = function() { //default function, to be override if browser supports input type='file'
  $scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
}


var fileUploadScope;
var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
fileSelect.type = 'file';

if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
  return;
}
var fileUploadScope;
var fileUploadName;
$scope.docUpload = function(x) { //activate function to begin input file on click
    switch(x){
        case "checkBankLetter":
            fileUploadScope = $parse("uploadCheckBankLetter");
            fileUploadName = $parse("uploadCheckBankLetterFileName");
            break;
        case "userId":
            fileUploadScope = $parse("uploadId");
            fileUploadName = $parse("uploadIdName");
            break;
        default:
            alert ("error");
    }


    fileSelect.click();
}

fileSelect.onchange = function() { //set callback to action after choosing file

     var f = fileSelect.files[0];
     var fsize = f.size;
     var fileTypes = ['jpg', 'jpeg', 'png', 'doc', 'docx', 'pdf', 'gif'];

    if (fsize > 2097152){//file size limit is 2MB
           alert ("File size too large. Please select a file 2MB or smaller.");
     }
     else {// file size is acceptable
         if(f){
             var extension = f.name.split('.').pop().toLowerCase(),  //file extension from input file
                 isSuccess = fileTypes.indexOf(extension) > -1;  //is extension in acceptable types

             if (isSuccess) { //yes
                var r = new FileReader();
                r.fileName = f.name;
                if (typeof FileReader !== "undefined"){

                        r.onloadend = function(e) { //callback after files finish loading
                            // allow for different scope names for file upload functions
                            fileUploadScope.assign($scope.user, e.target.result);
                            fileUploadName.assign($scope.user, r.fileName);

                            $scope.$apply();


                        //here you can send data over your server as desired
                        }
                        r.readAsDataURL(f); //once defined all callbacks, begin reading the file


                }



             }
             else {
                 alert("Please select an acceptable file type");
             }
         }
     } 




};

// function to process the form
$scope.processForm = function() {
    $http({
      method  : 'POST',
      url     : 'docusign.php',
      data    : $scope.user  // pass in data as strings

     })
      .success(function(data) {
            console.log(data);
            location.replace(data);
        });
};
}])

单击processForm()并选择文件后，

<button href="#" ng-click='docUpload("userId")'>Upload File</button>正在触发，我无法弄清楚为什么会这样。

Answer 1

我不确定这是否是最佳做法，但我能够通过在输入按钮中添加onclick="return false"来解决我的问题。

Answer 2

理想情况下，最好为按钮指定type属性。

没有type属性的

按钮充当提交按钮，这是您在单击按钮时提交表单的原因。

因此，将type属性添加到按钮type="button" 删除href属性，因为按钮不需要。

更改此行
<button href="#" ng-click='docUpload("userId")'>Upload File</button>
到
<button type="button" ng-click='docUpload("userId")'>Upload File</button>

AngularJS表单提交时不应该提交，我不确定为什么

2 个答案: