从angular到php服务器上传和检索图像

Question

I created the application using ionic and angular with php back end.

I can able to upload the image from angular to php server as per below workouts.

Upload.js

$scope.onProfileFileSelect = function($files) {
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
var $file = $files[i];
console.log($file.name);
$upload.upload({
url: 'http://www.testphp.com/upload.php',
file: $file,
progress: function(e){}
}).then(function(response) {
// file is uploaded successfully
$timeout(function() {
console.log(response.data);
});
}); 
}
}

Upload.html

<div class="item item-input item-icon-right">
<span class="input-label">Capture your profile picture: </span>                
<input type="file" name="ProfilePath" ng-model="inmateData.IMProfilePhotoPath" ng-file-select="onProfileFileSelect($files)" multiple />
</div>

Upload.php

<?php

if (isset($_SERVER['HTTP_ORIGIN'])) 
{
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400');    // cache for 1 day
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

exit(0);
}

$target_dir = "Inmate_Images/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$result = move_uploaded_file($_FILES["file"]["tmp_name"], $target_file);
echo json_encode($_FILES["file"]);
echo($result);
?>

As of now I can able to upload the selected image and stored in my PHP server "Inmate_Images" folder.

My requirement is :

1. I need to change the image file name and then upload it in server.

2. And how to get the image using get request and the name which I have given while upload. ??

How to handle this activity any idea ?

Answer 1

As mentioned my requirement second point I found the answers please find the below one. Any suggestions pls let me know.

preview.html

<img ng-src="http://www.testphp.com/Inmate_Images/mike.png" style="height:75px; padding: 5px 5px 5px 5px;"/>

The thing is you just get the path of your images folder in your server and you can able to display it directly using < img > tag.

But My question is How can I change the image file name while choosing from < input type=file > tag Because I want to change the file name while upload it would be easier for me to get the file again.