- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要在使用 Laravel 5.1 作为后端的 Angular 应用程序中将图像和视频文件上传到服务器。所有的 Ajax 请求都需要首先到达 Laravel Controller ,我们在那里有代码来处理文件到达那里时的处理方式。我们以前使用普通的 HTML 表单将文件上传提交到 Controller ,但在这种情况下,我们需要避免表单的页面刷新,所以我通过 Angular 在 Ajax 中尝试这样做。
之前通过 HTML 表单发送到 Controller 的哪些信息需要使用 Ajax 发送到 Laravel Controller ?
这是 Laravel Controller 中处理文件信息的代码。这就是我需要弄清楚如何发送的内容,因此我希望可以重用此代码:
$promotion = Promotion::find($id);
if (Input::hasFile('img_path')){
$path = public_path().'/images/promotion/'.$id.'/';
$file_path = $path.'promotion.png';
$delete = File::delete($file_path);
$file = Input::file('img_path');
$uploadSuccess = $file->move($path, 'promotion.png');
$promotion->img_path = '/images/promotion/'.$id.'/promotion.png';
}
if (Input::hasFile('video_path')){
$path = public_path().'/video/promotion/'.$id.'/';
$file_path = $path.'promotion.mp4';
$delete = File::delete($file_path);
$file = Input::file('video_path');
$uploadSuccess = $file->move($path, 'promotion.mp4');
$promotion->video_path = '/video/promotion/'.$id.'/promotion.mp4';
}
正如您在上面看到的,我们正在将我们获得的任何文件转换为文件名为 promotion.png 的 PNG,以便于获取,并且我们只接受 .mp4 视频格式。因此,我们无需担心检查文件是否存在以及是否可以覆盖它。这就是为什么您可以在代码中看到我们在保存之前删除了该名称的任何现有文件。
HTML 只是一个"file"类型的输入:
<input type="file" id="img_path" name="img_path" class="promo-img-path" accept="image/*">
我们现在正在使用 Angular,所以我不能再通过 HTML 表单发送上面的内容了。这就是我需要弄清楚该怎么做。
我们是两个尽最大努力的开发者,所以我相信有更好的方法来做到这一点。然而,在我重构这整个事情之前,我希望我可以使用 Angular(或 jQuery 作为最后的手段)向 Controller 发送 Laravel 需要的任何文件数据,以使上述代码工作。答案可能很简单,就像“将 PUT 发送到上面那个 Controller 中的方法,但不是普通的 JSON 有效负载,而是使用这种格式的文件信息,您可以使用...收集该信息”
我也很感激任何关于我在未来可以更好地做到这一点的提示。
最佳答案
使用 FormData API 时要 POST 文件和数据,设置 Content-Type header 很重要至 undefined
.
var fd = new FormData()
for (var i in $scope.files) {
fd.append("fileToUpload", $scope.files[i]);
}
var config = {headers: {'Content-Type': undefined}};
var httpPromise = $http.post(url, fd, config);
默认情况下,AngularJS 框架使用内容类型 application/json
.通过设置 Content-Type: undefined
, AngularJS 框架省略了允许 XHR API 的内容类型 header 设置内容类型。发送 FormData object 时, XHR API 将内容类型设置为 multipart/form-data
具有适当的边界和base64编码。
有关详细信息,请参阅 MDN Web API Reference - XHR Send method
How did you get the file information into
$scope.files
?
<input type="file">
与ng-model
一起工作该指令还启用<input type="file">
自动使用 ng-change
和 ng-form
指令。
angular.module("app",[]);
angular.module("app").directive("selectFilesNg", function() {
return {
require: "ngModel",
link: function postLink(scope,elem,attrs,ngModel) {
elem.on("change", function(e) {
var files = elem[0].files;
ngModel.$setViewValue(files);
})
}
}
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
<h1>AngularJS Input `type=file` Demo</h1>
<input type="file" select-files-ng ng-model="fileArray" multiple>
<code><table ng-show="fileArray.length">
<tr><td>Name</td><td>Date</td><td>Size</td><td>Type</td><tr>
<tr ng-repeat="file in fileArray">
<td>{{file.name}}</td>
<td>{{file.lastModified | date : 'MMMdd,yyyy'}}</td>
<td>{{file.size}}</td>
<td>{{file.type}}</td>
</tr>
</table></code>
</body>
使用 multi-part/form-data
发布二进制文件效率低下 base64 encoding额外增加了 33% 的开销。如果服务器 API 接受带有二进制数据的 POST,则直接发布文件。
关于php - AngularJS 使用 FormData API 上传多个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41750675/
我有以下代码,使用ajax上传文件,因为我不想使用表单操作。但我无法这样做。代码是: Select xml file to upload: ajax代码是: $('#upload_xml').on
我有 3 个图像或多图像数组,其总大小约为。 29mb 或以上。我尝试使用 Ajax 和表单数据将其发布在服务器端。但是当我尝试在 MVC 中使用 FormData 发布大数据时它显示错误,有什么解决
我想了解浏览器如何解释表单数据。我知道一个 http 请求包含 [Method][Header][URL][Params][Body] 我不知道如何将表单数据放在那里?它是被解释为参数(查询字符串)还
我正在做一个项目,我需要在提交之前更改 FormData。我无法更改元素值,我必须更改进入 POST 的实际 FormData。 我尝试更改 form.onsubmit 以更新值(适用于某些字段,但其
我正在尝试使用 FormData html5 api 设置多文件上传。问题是我无法删除 FormData 键上的数组索引。例如: if(editor.frmData){ editor.
我试图在提交表单时获取表单数据键值对对象,使用 new FormData()构造函数。但它总是返回空数据。 我已经尝试过event.persist()避免 react 事件池,但没有任何效果 expo
在 jQuery 代码中, var formData = new FormData($('#content-submit')[0]); formData.append("Title",
我正在使用 fetch API 从浏览器发送发布请求。这是我的代码: const headers = new Headers(); headers.append("Content-Type", "ap
你好,我有他的上传文件表格 $("#form").on('submit',(function(e) { e .preventDefault(); $.ajax({
我需要根据用户输入(从 html 表单发送)创建一个 formData,因为我需要修改图像图片(压缩/调整大小/裁剪),然后将新的 FormData 提交到服务器: $(document).r
我似乎对 FormData 为空有疑问。我正在尝试在单个 POST 请求中上传文件和 JSON。我尝试了各种各样的方法,但似乎没有任何效果。我想知道我是否在这里弄乱了一些基本的东西,但我似乎找不到任何
我需要在 FormData 中添加图像数组,但只有第一个图像通过。 我知道问题出在 JS 代码中,因为当我将表单直接发送到 php 页面时,它工作正常。 JavaScript var url = $(
我正在以非正常方式获取文件及其值。表单中没有实际输入。因此,我尝试将文件附加到 formData 以进行 ajax 提交。 每当我尝试使用以下方法提交表单时,我的文件都不会上传。因此,我附加文件的方式
formData 的参数之一可以包含对象吗? 如果我执行以下操作,该对象将在服务器端转换为字符串。 formData.append('first_name', 'takuya'); formD
我想将带有附加数据的图像从 React.js 发送到 Django 后端。当我使用 FormData() 创建表单数据时,它无法发送数组(因为它将其转换为字符串)。这是我的代码: let formDa
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 此问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic
我有一个 Web 应用程序,它使用 FormData 对象通过 jQuery.ajax() 上传。到目前为止,一切都很好。数据作为 multipart/form-data 发送,服务器解析它,没有问题
这个问题已经有答案了: FormData.get function is undefined (2 个回答) 已关闭 7 年前。 我正在尝试进行简单的 ajax 文件上传,但收到“未捕获的类型错误:f
我正在使用 Angular 5,这是 Angular 的新手,但我已经研究过很多 JavaScript 框架。我陷入了一个问题,下面是我现在面临的描述问题。 我已经创建了表单,我想在提交时发送到服务器
我正在关注How-to-submit-additional-form-data并有一个正在提交附加表单数据的工作文件上传,即。附加文本区域输入字段 description[],具有分块和多文件支持,无
我是一名优秀的程序员,十分优秀!