javascript 如何以及在何处使用 ng-flow 保存上传的文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23811678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How and where save uploaded files with ng-flow?
提问by Tom-pouce
First of all, I use ng-flow(html5 file upload extension on angular.js framework)
首先，我使用ng-flow（angular.js框架上的html5文件上传扩展）
My files are uploaded, I log the event in console. But I don't understand where and how to save them.
我的文件已上传，我在控制台中记录了事件。但我不明白在哪里以及如何保存它们。
Here is my html code, upload is called.
这是我的 html 代码，调用了上传。
<div flow-init flow-files-submitted="$flow.upload()">
<div class="drop" flow-drop ng-class="dropClass">
<span class="btn btn-default" flow-btn>Upload File</span>
<span class="btn btn-default" flow-btn flow-directory ng-show="$flow.supportDirectory">Upload Folder</span>
<b>OR</b>
Drag And Drop your file here
</div>
Here is my config
这是我的配置
app.config(['flowFactoryProvider', function (flowFactoryProvider) {
flowFactoryProvider.defaults = {
target: 'upload.php',
permanentErrors: [404, 500, 501],
maxChunkRetries: 1,
chunkRetryInterval: 5000,
simultaneousUploads: 4,
singleFile: true
};
flowFactoryProvider.on('catchAll', function (event) {
console.log('catchAll', arguments);
});
// Can be used with different implementations of Flow.js
// flowFactoryProvider.factory = fustyFlowFactory;
}]);
upload.phpis called, and $_GETis full with data,
upload.php被调用，并且$_GET充满了数据，
<script>alert('alert' + array(8) {
["flowChunkNumber"]=>
string(1) "1"
["flowChunkSize"]=>
string(7) "1048576"
["flowCurrentChunkSize"]=>
string(6) "807855"
["flowTotalSize"]=>
string(6) "807855"
["flowIdentifier"]=>
string(11) "807855-3png"
["flowFilename"]=>
string(5) "3.png"
["flowRelativePath"]=>
string(5) "3.png"
["flowTotalChunks"]=>
string(1) "1"
}
)</script>
but when I'm here what I have to do to save my files?
但是当我在这里时我必须做些什么来保存我的文件？
I tried to do move_uploaded_file()on flowFilenameand flowRelativePathbut nothing append.
我试图做move_uploaded_file()的flowFilename和flowRelativePath，但没有追加。
I'm new in js.
我是 js 新手。
Thank you.
谢谢你。
回答by chovy
Look at the upload.php example script:
查看upload.php示例脚本：
https://github.com/flowjs/flow.js/blob/master/samples/Backend%20on%20PHP.md
https://github.com/flowjs/flow.js/blob/master/samples/Backend%20on%20PHP.md
// init the destination file (format <filename.ext>.part<#chunk>
// the file is stored in a temporary directory
$temp_dir = 'temp/'.$_POST['flowIdentifier'];
$dest_file = $temp_dir.'/'.$_POST['flowFilename'].'.part'.$_POST['flowChunkNumber'];
回答by Stanislav Pereverziev
After you upload your image with flow.js, a new post request is sent to your server. You need to handle this POST request and manipulate the file afterwards.
使用 flow.js 上传图像后，新的发布请求将发送到您的服务器。您需要处理此 POST 请求并在之后操作文件。
If you are using Java + Spring MVC it would looks like
如果您使用的是 Java + Spring MVC，它看起来像
@RequestMapping(value = "/upload",
method = RequestMethod.POST,
produces = MediaType.APPLICATION_JSON_VALUE)
public void handleFileUpload(@RequestParam("file") MultipartFile file) {
log.debug("REST request to handleFileUpload");
try {
BufferedOutputStream stream =
new BufferedOutputStream(new FileOutputStream(new File(path + file.getName())));
stream.write(file.getBytes());
stream.close();
log.debug("You successfully uploaded " + file.getName() + "!");
} catch (IOException e) {
e.printStackTrace();
}
}
回答by Don F
I just spent half a day working with ng-flow and wanted to post the solution to this for PHP. It doesn't take advantage of the chunking and resume functionality, I just needed something that would upload without a page refresh.
我只花了半天时间使用 ng-flow 并想为 PHP 发布解决方案。它没有利用分块和恢复功能，我只需要一些无需刷新页面即可上传的内容。
First, flow-init="{target: '/upload', testChunks:false}" Example
一、flow-init="{target: '/upload', testChunks:false}" 示例
<div flow-init="{target: '/upload', testChunks:false}" flow-files-submitted="$flow.upload()" flow-file-success="$file.msg = $message">
<input type="file" flow-btn />
<span flow-btn>Upload File</span>
</div>
Second,
第二，
It should now POST a request to "/upload"..... in that request exists a $_FILES array.
它现在应该 POST 一个请求到“/upload”..... 在该请求中存在一个 $_FILES 数组。
one line of code saved the file for me:
一行代码为我保存了文件：
$result=move_uploaded_file($_FILES['file']['tmp_name'],'yourfilename');
If you are looking to control this through your angular controller, you can set the values like so:
如果你想通过你的角度控制器来控制它，你可以像这样设置值：
$scope.uploader={};
$scope.upload = function (id) {
$scope.uploader.flow.opts.testChunks=false;
$scope.uploader.flow.opts.target='/upload;
$scope.uploader.flow.upload();
}
and in your html add:
并在您的 html 添加：
<div flow-init flow-name="uploader.flow">
<button flow-btn>Add files</button>
<div>
Don
大学教师
回答by Sivaprabu Ganesan
Create a folder called uploadsmeans where you moved the temp files to here then add the code in php script.
创建一个名为uploads的文件夹意味着您将临时文件移动到此处，然后在 php 脚本中添加代码。
$uploads_dir = 'uploads';
$target_file = $uploads_dir .'/'. basename($_FILES['file']['name']);
move_uploaded_file($_FILES['file']['tmp_name'],$target_file);
