如何在 Angular js 中使用 xmlHTTPRequest 上传文件？答案

【问题标题】：How to upload a file using xmlHTTPRequest in angular js?如何在 Angular js 中使用 xmlHTTPRequest 上传文件？
【发布时间】：2015-07-26 01:37:43
【问题描述】：

我想上传一个有角度的文件。我试过以下：

<div >
<form  enctype="multipart/form-data" method="post" novalidate name="form">          
                    <input type="file"  onchange="angular.element(this).scope().setFile(this)" required>                
                    {{files.name}}                  
    <div >
        <button type="button" ng-class="{'tbt-btn':true, 'primary-btn':true}" ng-click="uploadFile(form,files)">Save</button>           
    </div>
</form>
</div>

JS---

 $scope.uploadFile = function (form,files) {
     if (form.$invalid) return;
     var path = files;        

    var uploadProgress = function (e) {
        if (e.lengthComputable) {
          var percent = Math.round(e.loaded * 100 / e.total);
          console.log('upload progress: ' + percent + '%');
        }
      },
      uploadComplete = function (e) {
        if (e.target.status !== 200) {
          uploadError(e);
          return;
        }
        var locations = JSON.parse(e.target.responseText);
        //function I want to call
      },
      uploadError = function (e) {

      },
      uploadAbort = function (e) {

      };

    var fd = new FormData();
    var files = files;
    for (var i = 0; i < files.length; i++) {
      fd.append("file", files[i]);
    }

    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadError, false);
    xhr.addEventListener("abort", uploadAbort, false);        
    xhr.open("POST", "/fileupload");        
    xhr.send(fd);

}

但它不起作用。我收到错误 - “缺少初始多部分边界” 另外，我不确定我需要在 xhr.open(); 中传递哪些参数。你能帮我解决这个问题吗？

谢谢

【问题讨论】：

open() 方法很好，不过如果需要可以添加更多参数developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#open()
如果文件上传一个文件夹？
是的..打开方法中URL的意义是什么？
好吧，我总是使用 XHR 对象，我用 servlet 名称填充 URL，或者只是我的本地主机的 URL，但我没有使用文件夹。无论如何，网上有很多关于这个的问题。如果没有找到任何东西（会很奇怪），请告诉我。
ok.. 我使用 localhost url 尝试过，之前的错误消失了。但是出现了一个新错误 - Uncaught SyntaxError: Unexpected token

标签： java html angularjs xmlhttprequest

【解决方案1】：

您可以使用这个简单的控件来上传您的文件：

HTML：

  <input type="file" data-ng-model="fileName" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)"
                                   name="file">

控制器：

   $scope.uploadFile = function (files) {
                var fd = new FormData();
                fd.append("file", files[0]);
                 "your api with (fd)".then(function (response) {
                    if (files && files[0]) {
                        var reader = new FileReader();
                        reader.onload = function (e:any) {
                            $('#blah').attr('src', e.target.result).width(190).height(200);
                        };
                        reader.readAsDataURL(files[0]);
                    }
                     $scope.imageName = response;

                })
            };

【讨论】：

点击，你会得到一个文件资源管理器来选择你要上传的文件