上传文件角度[重复]
Posted
技术标签:
【中文标题】上传文件角度[重复]【英文标题】:Upload files angular [duplicate] 【发布时间】:2017-12-30 06:07:07 【问题描述】:在我的 $scope.accept 中,我正在尝试将一些文件上传到我的服务器,
当我在我的 html 中执行 <form id="mForm" action="http://.php" method="post" enctype="multipart/form-data">
时,脚本正在运行。
但是我想停止重定向,所以我想在我的控制器上使用 ajax。当我在控制器端运行相同的脚本时,出现此错误: TypeError:无法读取未定义的属性“长度” 在 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" >
</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[]">
【问题讨论】:
由于您没有在多个文件的输入标签中添加“多个”,可能这就是长度属性无法访问的原因 【参考方案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
中的每个文件。
【讨论】:
【参考方案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
【讨论】:
以上是关于上传文件角度[重复]的主要内容,如果未能解决你的问题,请参考以下文章