用AngularJs上传文件/图片

我想用AngularJs上传文件（所以图片）...我读AngularJs不支持tag input type =“file”，所以我读了我需要的自定义指令...我想取输入文件，并将其用于显示预览（缩略图）在同一个页面的html和控制器上传的文件在服务器上...在我的网页HTML我写了这个代码：用AngularJs上传文件/图片

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

这是我的控制器：

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

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

此代码不起作用...是否有解决方案？错误在哪里？

来源

2015-04-22 Ragnarr

来自您发布的代码，它似乎缺少一个ng-app声明 - 将ng-app放在body标签上，如下所示： – oliveromahony

I在这里省略充足，因为它服务 – Ragnarr

你应该做的显示图像下面：

<pre><img data-ng-src="data:image/png;base64,{{ content }}"/></pre>

和从输入检索数据，你应该使用诸如this answer显示自定义指令：

angular.module('appFilereader', []).directive('appFilereader', function($q) 
{ 
    var slice = Array.prototype.slice; 
    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: function(scope, element, attrs, ngModel) { 
      if (!ngModel) return; 

      ngModel.$render = function() {}; 

      element.bind('change', function(e) { 
       var element = e.target; 

       $q.all(slice.call(element.files, 0).map(readFile)) 
        .then(function(values) { 
         if (element.multiple) ngModel.$setViewValue(values); 
         else ngModel.$setViewValue(values.length ? values[0] : null); 
        }); 

       function readFile(file) { 
        var deferred = $q.defer(); 

        var reader = new FileReader(); 
        reader.onload = function(e) { 
         deferred.resolve(e.target.result); 
        }; 
        reader.onerror = function(e) { 
         deferred.reject(e); 
        }; 
        reader.readAsDataURL(file); 

        return deferred.promise; 
    } 

); //change

而且在你的html中：

<input type="file" ng-model="editItem._attachments_uri.image" 
accept="image/*" app-filereader />

来源

2015-04-22 09:52:01 Michael

对不起，但这段代码是全部在指令？ – Ragnarr

对不起，你能帮我一下我的代码吗？因为它必须运行...如果我以这种方式将警报定位在警报（文件）;我获得[object File]，因此我可以读取文件，并且可以读取名称，大小和上次修改的内容。当我通过范围传递文件。$ emit（“fileSelected”，file）;我在我的控制器中使用这个值...如果我尝试在我的页面html中显示文件，并在我的控制台中显示我的控制台“undefined”....为什么？谢谢！ – Ragnarr

错误在你的指令

检查这一点，我已经使用了相同的指令，在我的应用程序

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

}

试试这个小服务，它的工作对我来说

来源

2015-04-22 09:57:11

抱歉，您能评论该代码吗？另外如何将文件/ imge从指令传递到控制器以显示图像预览？谢谢！ – Ragnarr

@ user3751473我已经使用以下命令将文件/图像从指令传递到我的控制器函数 angular.element（document.querySelector（'＃fileInput'））。on（'change'，handleFileSelect）;我的控制器 var handleFileSelect = function（selectedFile）{0} var file = selectedFile.currentTarget.files [0]; var reader = new FileReader（）; reader.onload = function（selectedFile）{ $ scope。$ apply（function（$ scope）{ $ scope.myImage = selectedFile.target.result; }）; }; reader.readAsDataURL（file）; }; –

用AngularJs上传文件/图片

回答

相关问题