这是我的HTML表单:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
Run Code Online (Sandbox Code Playgroud)
我想从本地计算机上传图像,并想要读取上传文件的内容.我想用AngularJS做的所有这些.
当我尝试打印$scope.file它的值时,它是未定义的.
我尝试在输入标签上使用ng-model和类型文件:
<input type="file" ng-model="vm.uploadme" />
Run Code Online (Sandbox Code Playgroud)
但是在选择文件后,在控制器中,$ scope.vm.uploadme仍未定义.
如何在控制器中获取所选文件?
我想从AngularJS到node.js服务器做一个简单的多部分表单帖子,表单应该在一个部分包含一个JSON对象,在另一个部分包含一个图像,(我目前只发布带有$ resource的JSON对象)
我想我应该从input type ="file"开始,但后来发现AngularJS无法绑定到那个..
我能找到的所有例子都是用于拖放jQuery插件的拖放.我想要一个简单的上传一个文件.
我是AngularJS的新手,对编写我自己的指令感到不舒服.
我正在尝试使用ng-upload在AngularJS中上传文件,但我遇到了问题.我的HTML看起来像这样:
<div class="create-article" ng-controller="PostCreateCtrl">
<form ng-upload method="post" enctype="multipart/form-data" action="/write" >
<fieldset>
<label>Category</label>
<select name="category_id" class="">
<option value="0">Select A Category</option>
<?php foreach($categories as $category): ?>
<option value="<?= $category -> category_id; ?>"><?= $category -> category_name; ?></option>
<?php endforeach; ?>
</select>
<label>Title</label>
<input type="text" class="title span5" name="post_title"
placeholder="A catchy title here..."
value="<?= $post -> post_title; ?>" />
<label>Attach Image</label>
<input type="file" name="post_image" />
<a href='javascript:void(0)' class="upload-submit: uploadPostImage(contents, completed)" >Crop Image</a>
<label>Body</label>
<div id="container">
<textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."><?= $post -> post_content; ?></textarea> …Run Code Online (Sandbox Code Playgroud) 单击提交按钮时如何获取文件内容。我只得到第一和第二输入。请参考摘要:
!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<input type="file" ng-model="user.file">
<br><br>
<button ng-click="reset()">Submit</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.reset = function(){
console.log($scope.user)
}
});
</script>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
我需要使用 Laravel 5.1 作为后端在 Angular 应用程序中将图像和视频文件上传到服务器。所有的 Ajax 请求都需要首先到达 Laravel 控制器,我们在那里有关于文件到达时如何处理的代码。我们之前已经做了普通的 HTML 表单来提交文件上传到控制器,但是在这种情况下我们需要避免表单的页面刷新,所以我通过 Angular 在 Ajax 中尝试这样做。
我需要使用 Ajax 将哪些信息发送到 Laravel 控制器,而这些信息以前是通过 HTML 表单发送到控制器的?
这是 Laravel 控制器中的代码,一旦文件信息到达那里,它就会处理文件信息。这就是我需要弄清楚如何发送的,所以我希望可以重用这段代码:
$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';
}
Run Code Online (Sandbox Code Playgroud)
正如您在上面看到的,我们正在将我们得到的任何文件转换为 PNG,文件名为 Promotion.png,因此很容易获取,而且我们只接受 .mp4 视频格式。因此,我们无需担心检查文件是否存在以及是否可以覆盖它。这就是为什么您可以在代码中看到我们在保存之前删除了该名称的任何现有文件。
HTML 只是一个输入类型为“文件: …