http://jsfiddle.net/vishalvasani/4hqVu/在chrome和IE中运行良好(如果你在background-image中稍微更新CSS)。 用于更新进度条:

 scope.progress = Math.round(evt.loaded * 100 / evt.total)

但是在FireFox中，angular的[percent]数据没有在DOM中成功更新，尽管文件上传成功。

你可以使用flow.js实现良好的文件和文件夹上传。

https://github.com/flowjs/ng-flow

点击这里查看演示

http://flowjs.github.io/ng-flow/

它不支持IE7, IE8, IE9，所以你最终必须使用兼容层

https://github.com/flowjs/fusty-flow.js

您可以考虑使用IaaS进行文件上传，例如Uploadcare。有一个针对它的Angular包:https://github.com/uploadcare/angular-uploadcare

从技术上讲，它被实现为一个指令，提供了不同的上传选项，以及小部件中上传图像的操作:

<uploadcare-widget
  ng-model="object.image.info.uuid"
  data-public-key="YOURKEYHERE"
  data-locale="en"
  data-tabs="file url"
  data-images-only="true"
  data-path-value="true"
  data-preview-step="true"
  data-clearable="true"
  data-multiple="false"
  data-crop="400:200"
  on-upload-complete="onUCUploadComplete(info)"
  on-widget-ready="onUCWidgetReady(widget)"
  value="{{ object.image.info.cdnUrl }}"
 />

更多配置选项:https://uploadcare.com/widget/configure/

这里的一些答案建议使用FormData()，但不幸的是，这是一个浏览器对象，在Internet Explorer 9及以下版本中不可用。如果您需要支持这些旧浏览器，您将需要一个备份策略，例如使用<iframe>或Flash。

已经有很多Angular.js模块来执行文件上传。这两种浏览器都明确支持旧浏览器:

https://github.com/leon/angular-upload -使用iframes作为备份 https://github.com/danialfarid/ng-file-upload -使用FileAPI/Flash作为备份

还有一些其他的选择:

https://github.com/nervgh/angular-file-upload/ https://github.com/uor/angular-file https://github.com/twilson63/ngUpload https://github.com/uploadcare/angular-uploadcare

其中一个应该适合你的项目，或者可能会给你一些关于如何自己编写代码的见解。

我已经阅读了所有的线程，HTML5 API解决方案看起来最好。但它会改变我的二进制文件，以一种我没有调查过的方式破坏它们。最适合我的解决方案是:

HTML:

<input type="file" id="msds" ng-model="msds" name="msds"/>
<button ng-click="msds_update()">
    Upload
</button>

JS:

msds_update = function() {
    var f = document.getElementById('msds').files[0],
        r = new FileReader();
    r.onloadend = function(e) {
        var data = e.target.result;
        console.log(data);
        var fd = new FormData();
        fd.append('file', data);
        fd.append('file_name', f.name);
        $http.post('server_handler.php', fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
            console.log('success');
        })
        .error(function(){
            console.log('error');
        });
    };
    r.readAsDataURL(f);
}

服务器端(PHP):

$file_content = $_POST['file'];
$file_content = substr($file_content,
    strlen('data:text/plain;base64,'));
$file_content = base64_decode($file_content);

我尝试了@ anoz(正确答案)给出的所有替代方案…最好的解决方案是https://github.com/danialfarid/angular-file-upload

一些特点:

进步 多文件 字段 旧浏览器(IE8-9)

这对我来说很好。你只需要注意说明。

在服务器端，我使用NodeJs, Express 4和Multer中间件来管理多部分请求。