上傳文件角

Question

在我的$ scope.accept我試圖上傳一些文件到我的服務器， 腳本正在工作，當我在我的HTML做<form id="mForm" action="http://.php" method="post" enctype="multipart/form-data">。

但我想停止重定向，所以我想用我的控制器上的ajax做到這一點。當我運行在控制器端相同的腳本我得到這個錯誤： 類型錯誤：在蘇比爾不確定 無法讀取屬性「長度」 ...... 在這一行特別：變種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時，它將返回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中的每個文件。

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