gpt4 book ai didi

javascript - 使用 AngularJs 上传文件/图片

转载 作者:行者123 更新时间:2023-11-30 00:30:25 26 4
gpt4 key购买 nike

我想用 AngularJs 上传一个文件(这样的图像)...我读到 AngularJs 不支持标签输入类型 ="file" 所以我读到我需要自定义指令...我想获取输入文件并使用它在同一页 html 上显示预览(缩略图),并在 Controller 中将文件上传到服务器上...在我的页面 html 中,我写了这段代码:

<body ng-controller="myController">

<h1>Select file</h1>
<input type="file" file-model="myFile" />
<div>
<h2>File content is:</h2>
<pre>{{ content }}</pre>
</div>

</body>

我写了这个指令:

var modulo = angular.module('myApp', []);


modulo.directive('fileModel', function () {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('change', function (event) {
var file = event.target.files[0];
scope.$emit("fileSelected", file);
});
}
};
});

这是我的 Controller :

modulo.controller('myController', function ($scope) {

$scope.$on('fileSelected', function (event, args) {
$scope.content(args.file);
console.log(args.file);
});
});

此代码不起作用...有解决方案吗?哪里出错了?

最佳答案

错误在你的指令中

检查这个,我在我的应用程序中使用了相同的指令

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

element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}
this is my html to
input(type="file", file-model="myFile", accept="image/*", image="image", id='fileInput')

这是我为处理上传而创建的一个小服务

function fileUpload (file, uploadUrl) { 

var cropedImage = dataURItoBlob(file);
var fileData = new FormData(),
uploadedImage = '';
fileData.append('fileUpload', cropedImage);

return $http({
withCredentials: true,
method: "POST",
url: uploadUrl,
data: fileData,
headers: {'Content-Type': undefined},
transformRequest: angular.identity
});

}

试试这个,它对我有用

关于javascript - 使用 AngularJs 上传文件/图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29793650/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com