Wie und wo speichern hochgeladene Dateien mit ng-flow?

Question

Zuerst verwende ich ng-flow (html5 Datei-Upload-Erweiterung auf angular.js Rahmen)

Meine Dateien hochgeladen werden, protokolliere ich das Ereignis in der Konsole. Aber ich verstehe nicht, wo und wie man sie speichert.

Hier ist mein HTML-Code, Upload heißt. Hier

<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> 

ist meine 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.php genannt wird, und $_GET ist voll mit Daten,

<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> 

aber wenn ich hier bin, was ich tun, um meine zu retten Dateien?

Ich habe versucht move_uploaded_file() auf flowFilename und flowRelativePath aber nichts append.

Ich bin neu in js.

Vielen Dank.

Answer 1

Blick auf das upload.php Beispielskript:

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']; 

Answer 2

Nachdem Sie laden wird Ihr Bild mit flow.js, eine neue Post-Anforderung an den Server gesendet. Sie müssen diese POST-Anfrage bearbeiten und die Datei anschließend bearbeiten.

Wenn Sie Java + Spring MVC verwenden würde es sieht aus wie

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

Answer 3

ich einen halben Tag nur verbrachte mit ng-Flow zu arbeiten und wollte die Lösung dieses Problems für PHP veröffentlichen. Es nutzt die Chunking- und Fortsetzungsfunktionalität nicht, ich brauchte nur etwas, das ohne Seitenaktualisierung hochgeladen würde.

Zuerst Flow-Init = "{Ziel: '/ upload', testChunks: false}" Beispiel

<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> 

Zweitens

Es ist nun eine Anfrage an „/ upload POST sollte "..... in dieser Anfrage existiert ein $ _FILES-Array.

eine Zeile Code gespeichert, die Datei für mich:

$result=move_uploaded_file($_FILES['file']['tmp_name'],'yourfilename'); 

---

Wenn Sie schauen, dies durch Ihre Winkel Controller zu steuern, können Sie die Werte wie so einstellen:

$scope.uploader={}; 
    $scope.upload = function (id) { 

     $scope.uploader.flow.opts.testChunks=false; 
     $scope.uploader.flow.opts.target='/upload; 
     $scope.uploader.flow.upload(); 
    } 

und in Ihrer html hinzufügen:

<div flow-init flow-name="uploader.flow"> 
<button flow-btn>Add files</button> 
<div> 

Don

Answer 4

Erstellen Sie einen Ordner mit dem Namen uploads bedeutet, wo Sie die Temp-Dateien hierher verschoben haben, dann fügen Sie den Code in PHP-Skript.

$uploads_dir = 'uploads'; 
$target_file = $uploads_dir .'/'. basename($_FILES['file']['name']); 
move_uploaded_file($_FILES['file']['tmp_name'],$target_file);