上传文件 angular

15 浏览
0 Comments

上传文件 angular

在我的$scope.accept中，我试图将一些文件上传到我的服务器，当我在HTML中只执行

时，脚本是正常工作的。但是我想停止重定向，所以我想在我的控制器中用ajax来实现。当我在控制器端运行相同的脚本时，我得到了这个错误：TypeError: Cannot read property \'length\' of undefined\n at subir .....\n特别是在这一行：var i = 0, len = filedata.files.length, img, reader, fil;\n

function subir() {
    alert("ok");
var filedata = document.getElementsByName("file"),
        formdata = false;
if (document.FormData) {
    formdata = new FormData();
}
var i = 0, len = filedata.files.length, img, reader, file;
for (; i < len; i++) {
    file = filedata.files[i];
    if (document.FileReader) {
        reader = new FileReader();
        reader.onloadend = function(e) {
            showUploadedItem(e.target.result, file.fileName);
        };
        reader.readAsDataURL(file);
    }
    if (formdata) {
        formdata.append("file", file);
    }
}
if (formdata) {
    $.ajax({
        url: "http:.php",
        type: "POST",
        dataType:'json',
        data: {json: formdata},
        processData: false,
        contentType: false,
        success: function(res) {                    
                alert("success");
        },       
        error: function(res) {
                alert("error");
         }       
         });
        }
    };

\n这是HTML的一部分：\n

0

2 答案

0 Comments

在使用AngularJS时，上传文件（Upload files angular）的问题可能出现的原因是：在传递文件给服务时，文件的类型是数组，而不是单个文件。

解决这个问题的方法是：

1. 在HTML中使用<input id="fileupload" type="file" name="files" file-model="myFile">定义文件上传的input标签，并使用file-model指令。

2. 在AngularJS的指令中定义file-model指令，将文件赋值给myFile变量。

3. 在控制器中定义$scope.myFile = null;来接收文件的细节/文件。

4. 在传递文件给服务时，需要将文件数组中的第一个文件传递给服务。可以使用以下代码：

this.uploadFile = function(file) {
            var fd = new FormData();
            fd.append('file', file[0]);
            var d = $q.defer();
            $http.post(uploadUrl, fd, {
                transformRequest: angular.identity,
                headers: {
                  'Content-Type': undefined
                }
              })
              .success(function(response) {
                d.resolve(response);
              })
              .error(function(response) {
                d.reject(response);
              });
             return d.promise;
        };

5. 对于解决方案的修改：可以使用以下代码：

var filedata = document.getElementsByName("file"),
     formdata = false;
     if (document.FormData) {
       formdata = new FormData();
     }
var i = 0, len = filedata.length, img, reader, file;

不需要使用.files来获取文件数据，因为fileData已经包含了所有的文件。

以上是解决AngularJS上传文件问题的方法。

0
0 Comments

问题出现的原因是在代码中返回了所有已上传的文件，即使只有一个文件。而且，当尝试访问filedata的files属性时，返回的是undefined，因为files属性只能从该数组中的单个元素获取。

解决方法是将代码中的这一行进行修改：

var i = 0, len = filedata.files.length, img, reader, file;

修改为：

var i = 0, len = filedata[0].files.length, img, reader, file;

此外，还需要将以下这一行进行修改：

file = filedata.files[i];

修改为：

file = filedata[0].files[i];

或者，如果可能有多个文件被提交，还可以添加一个for循环，遍历filedata中的每个文件。

0