Question

上传文件角度[重复]

2017-07-24

334

jquery html angularjs ajax ionic-framework

在我的 $scope.accept 中，我尝试将一些文件上传到我的服务器，当我在 HTML 中执行 <form id="mForm" action="http://.php" method="post" enctype="multipart/form-data"> 时，脚本可以正常工作。

但我想停止重定向，所以我想在控制器上使用 ajax 来执行此操作。当我在控制器端运行相同的脚本时，我收到此错误： TypeError：无法读取未定义的属性“length” 在 subir ..... 特别是在这一行： var i = 0, len = filedata.files.length, img, reader, fil;

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");
         }       
         });
        }
    };

这是 HTML 的一部分：

         <input type="file" accept="image/*;capture=camera" onchange="openFile_1(event)" id="file_1" class="custom-file-input" name="file[]">
     <img id="srcImage1" height="0">                                    
     </span>
        <span class="item item-input">                  
     <input type="text" id="obs_1" placeholder="Observaciones" style="text-align:left;"/>       
     </span>
        <span class="item item-input">
     <input type="file" accept="image/*;capture=camera" onchange="openFile_2(event)" id="file_2" class="custom-file-input" name="file[]">

Answer 1

代码中的这一行返回已上传的所有文件的数组，即使只有一个文件：

var filedata = document.getElementsByName("file")

此外，当您尝试访问 filedata 的属性 files 时，它会返回未定义，因为 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 中的每个文件。

Answer 2

您提到您正在使用 AngularJS。

这里有一个您可以尝试使用 angularjs 的解决方案

<input id="fileupload" type="file" name="files" file-model="myFile">

这是 file-model 指令

.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;
        }
    };
}]);

这是您的控制器代码的样子

$scope.myFile = null;

您可以在 myFile 变量中获取文件详细信息/文件，但它是一个数组，因此当您将其传递给服务时，您应该编写单独的服务，如下所示

 this.uploadFile = function(file) {
            var fd = new FormData();
            fd.append('file', file[0]); 
// file[0] if you're passing myFile directly from controller otherwise you can pass myFile[0] from there and pass just file here
            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;
        };

编辑：

在您的解决方案中尝试这个

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

您的 fileData 包含所有文件，因此您不需要执行 .files