javascript - Angular JS 中的文件上传

标签 javascript jquery ajax angularjs

我正在尝试通过 angularjs 上传 AJAX 文件。它告诉我我的表单数据格式不正确,或者类似的东西。

这是我的 html:

<TR>
    <TD class="labelWide" nowrap="nowrap">Upload PDF</TD>
    <TD class="required">&nbsp;</TD>
    <TD class="data">
        <input type="file" npr-uploader="temporary_upload">
        <button ng-click="uploadFile('pdf')">Load File</button><BR>
        <span ng-repeat="fileItem in data.pdfFiles">{{fileItem.filename}}<BR></span>
    </TD>
</TR>

这是我的指令:

nprDirectives.directive('nprUploader', ['$parse', function($parse){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.nprUploader);
            var modelSetter = model.assign;
            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

这是被调用的uploadFile函数:

$scope.uploadFile = function(arg_type){
    $scope.data.uploadFile($scope.temporary_upload, arg_type);
};

这是我的数据服务中用于上传的功能。

$scope.uploadFile = function(arg_file,arg_type,arg_key){
    var fd = new FormData();
    fd.append("attachment", arg_file);

    var urlType = "other";
    if(arg_type == "pdf"){
        urlType = "pdf";
    }

    $http.post( contextPath+'/uploadFile/ajax/upload/'+urlType, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
.success(stuff happens)
.error(stuff happens);

最后,这是我的错误消息:

HTTP Status 400 - Please check your Data
type:  Status Report
message:  Please check your Data
description:  The request sent by the client was syntactically incorrect (Please check your Data.).

我还继续查看了控制台中的 ajax 帖子,看到了这个:

-----------------------------168221372516176 
Content-Disposition: form-data; name="attachment"; filename="busicard.pdf" 
Content-Type: application/pdf

%PDF-1.4 
(etc lots of gobblygook because PDF with image)

最佳答案

此问题已关闭,因为我发现我正在以正确的方式格式化 AJAX 调用。问题实际上出在接收文件的 java 中。在没有对 JavaScript 进行更改的情况下,我成功地上传了一个文件。

关于javascript - Angular JS 中的文件上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24539107/

相关文章:

javascript - Javascript 中的 PMT 函数

javascript - 在调用函数之前执行异步调用

javascript - 通过 AJAX 和 jQuery 将变量 XML 作为属性的参数

javascript - 从嵌套对象中并行数组的属性获取总计

javascript - 将 WordPress 帖子 ID 传递到另一个页面

javascript - 用于多个类的 jQuery 过滤器,在匹配时隐藏 div

php - 使用ajax codeigniter php根据日期检索数据库值

javascript - backbone.js:同一进程的不同输出

ajax - 相当于 XHR 或 Ajax 库中的 Fetch 'no-cors' 模式?

php - Laravel 正在发送 GET 而不是 POST 请求