上传文件的Angular方式
问题的原因是:这段代码是使用AngularJS来上传文件的方式,但是由于一些问题,可能导致代码无法正常工作。
解决方法是:根据反馈的问题,进行相应的修改,以使代码能够正常工作。
首先,需要注意的是,代码中使用了一个指令(directive)来处理文件上传的逻辑。该指令绑定了一个change事件,当文件选择框的值改变时,会触发该事件。事件处理函数中,将选择的文件添加到一个FormData对象中,并调用一个名为httpPostFactory的工厂函数来进行文件上传的逻辑处理。在httpPostFactory函数中,使用了$http服务来发送POST请求,将文件数据作为请求体发送到服务器。服务器端使用PHP来接收文件并保存。
然后,根据反馈的问题,我们可以注意到一些需要修改的地方。首先是在指令中,input元素的属性名为data-my-Directive,但应该修改为my-directive。其次是在httpPostFactory函数中,应该将success方法改为then方法,因为success方法已经被废弃并从AngularJS V1.6中移除了。
此外,还有一些额外的问题和讨论。例如,如何在Node.js中获取上传的文件?是否需要使用ng-submit或form action?这些问题需要根据具体的需求进行进一步的讨论和调整。
总结起来,这段代码使用了AngularJS来实现文件上传的功能,但由于一些问题,可能导致代码无法正常工作。通过对代码进行修改和调整,可以解决这些问题,并使代码能够正常运行。同时,还可以根据具体需求进行进一步的讨论和调整。
问题的出现原因:
该问题的出现是因为需要在网页上使用JavaScript上传文件并显示Excel表格的内容,但不想将文件上传到服务器然后再从服务器获取内容。使用`readAsDataUrl()`方法可以获得文件的Base64编码形式,但如何读取并获取Excel数据呢?
解决方法:
解决方法是使用HTML5 API中的`FileReader`类。可以使用以下代码上传文件并获取Excel数据:
HTML代码:
在控制器中定义`add`方法:
$scope.add = function() { var f = document.getElementById('file').files[0], r = new FileReader(); r.onloadend = function(e) { var data = e.target.result; // 使用$http或$resource发送二进制数据,或进行其他操作 } r.readAsBinaryString(f); }
这个方法使用了标准的HTML5 File API中的`FileReader`类。它允许从HTML输入元素中指定的文件中读取数据,并在`onloadend`回调函数中处理数据。使用这个API不需要任何库,它已经包含在浏览器中(除非使用非常旧的浏览器)。
需要注意的是,`readAsBinaryString()`方法已经被弃用,应该使用`readAsArrayBuffer()`方法代替。
此外,还提到了浏览器的兼容性情况,以及不应该在控制器中访问DOM,而是应该在指令中处理。还回答了如何将二进制数据解码为图片文件并在PHP中保存的问题。最后提到了可能需要在服务器上创建与客户端上得到的文件名相同的文件。
以上就是关于“Uploading a file angular way”问题的出现原因和解决方法的整理。
问题的出现原因:
一些答案中提到使用FormData()来上传文件,但不幸的是,这是一个在Internet Explorer 9及以下版本中不可用的浏览器对象。如果您需要支持这些旧版本浏览器,您将需要一个备用策略,比如使用
问题的解决方法:
已经有许多Angular.js模块可用于执行文件上传。其中这两个模块明确支持旧版本浏览器:
- https://github.com/leon/angular-upload - 使用
- https://github.com/danialfarid/angular-file-upload - 使用FileAPI/Flash作为备选方案
其他一些选项包括:
- https://github.com/nervgh/angular-file-upload/
- https://github.com/uor/angular-file
- https://github.com/twilson63/ngUpload
- https://github.com/uploadcare/angular-uploadcare
其中一个应该适合您的项目,或者可以为您编写代码提供一些见解。
另外还有一个解决方案(用于文件上传的IaaS):https://github.com/uploadcare/angular-uploadcare
EggHead有一个关于这个问题的很好的视频教程:https://egghead.io/lessons/angularjs-file-uploads
danialfarid/angular-file-upload已更名为ng-file-upload
我自己有一个解决方案,我在https://github.com/vikibaarathi/Angular-PHP-Imgur-Upload上分享了它。
这个答案已经有3年了。在2016年,IE 9已经被淘汰了。
我认为您应该更新您的答案,提供一个合适的解决方案,而不仅仅是提供链接。这是Stack Overflow的方式。否则,您可以将其作为评论。