Related
I need to upload multiple files to a server using an ajax call.
Here is the code, every-time I am using it I am getting an upload error. The post is not working in the html side.
Below is the code I have used in html and php.
HTML
<input name="fileToUploadName" id="fileinput0" type='file' />
<input name="fileToUploadName" id="fileinput1" type='file' />
<input name="fileToUploadName" id="fileinput2" type='file' />
JS
function upload(){
var formdata = new FormData();
var image0 = $('#fileinput0')[0].files[0];
if(image0)
formdata.append('fileToUpload[]',image0);
var image1 = $('#fileinput1')[0].files[0];
if(image1)
formdata.append('fileToUpload[]',image1);
var image2 = $('#fileinput2')[0].files[0];
if(image2)
formdata.append('fileToUpload[]',image2);
$.ajax({
url: 'server.php',
type: 'POST',
data: formdata,
async: true,
dataType: "text",
success: function (data) {
alert(data);
},
error: function(jqXHR, textStatus, errorThrown){
var p =0;
alert("Error uploading data");
},
cache: false,
contentType: false,
processData: false
});
}
server.php
if(isset($_POST['submit']))
{
$uploaddir = 'uploads/';
foreach ($_FILES['fileToUpload']['error'] as $key => $error)
{
if ($error == UPLOAD_ERR_OK)
{
$tmp_name = $_FILES['fileToUpload']['tmp_name'][$key];
$name = $_FILES['fileToUpload']['name'][$key];
$uploadfile = $uploaddir . basename($name);
if (move_uploaded_file($tmp_name, $uploadfile))
{
echo "Success: File ".$name." uploaded.<br/>";
}
else
{
echo "Error: File ".$name." cannot be uploaded.<br/>";
}
}
}
}
But every time I am getting an upload error.
Your problem is here, in your JavaScript file:
url: 'serever.php';
This should be
url: 'server.php';
This is, however, a simple typographical error.
I am using codeigniter 3.1 . I want to post upload data using ajax.
Ajax upload file not working. But when i post the simple form without ajax, it working fine.
I don't know why but no error in console.
HTML
<?php echo form_open_multipart(site_url("upload/post"), ['id' => 'uploader']) ?>
<input type="file" name="userfile" value="">
<input type="submit" value="Submit" />
<?php echo form_close() ?>
JAVASCRIPT
$('#uploader').submit(function (event) {
event.preventDefault();
$.ajax({
url: window.location.href + '/post',
type: "POST",
dataType: 'json',
data: new FormData(this)
});
});
CONTROLLERS
public function post()
{
$this->load->helper('url');
$this->load->helper('form');
$this->load->library("upload");
$file = $this->common->nohtml($this->input->post("userfile"));
$this->upload->initialize(array(
"upload_path" => 'upload',
"overwrite" => FALSE,
"max_filename" => 300,
"encrypt_name" => TRUE
));
$this->upload->do_upload('userfile');
$data = $this->upload->data();
$image_file = $data['file_name'];
}
Another approach to this would be passing to PHP the file encoded in base64:
get the selected file from #userfile field using $('#userfile').prop('files')[0];
transform the contents of that file into a base64 encoded string using FileReader.readAsDataURL(). We're going to call this content; Here's a similar question showing how to do and expanding the answer & possibilities;
send the AJAX passing both the filename and content strings;
now on CI, fetch the POST data;
base64_decode() the content;
fwrite() the result into a file using the filename.
That way also you could avoid POSTing all form fields.
try this..
Post data using FormData() formdata post file also.
To get all your form inputs, including the type="file" you need to use FormData object.
$('#post').on('click', function (e) {
var file_data = $("#userfile").prop("files")[0];
var form_data = new FormData();
form_data.append("userfile", file_data)
$.ajax({
url: window.location.href+'/post',
type: 'POST',
data: form_data,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
For more...https://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax
One of the issues is that file uploading uses a different mechanism than the other form <input> types. That is why $this->input->post("userfile") isn't getting the job done for you. Other answers have suggested using javascript's FormData and this one does too.
HTML
A very simple form for picking a file and submitting it. Note the change from a simple button to <input type="submit".... Doing so makes it a lot easier for the javascript to use the FormData object.
FormData documentation
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
<title>Upload Test</title>
</head>
<body>
<?= form_open_multipart("upload/post", ['id' => 'uploader']); ?>
<input type="file" name="userfile">
<p>
<input type="submit" value="Upload">
</p>
<?php echo form_close() ?>
<div id="message"></div>
<script>
$('#uploader').submit(function (event) {
event.preventDefault();
$.ajax({
url: window.location.href + '/post',
type: "POST",
dataType: 'json',
data: new FormData(this),
processData: false,
contentType: false,
success: function (data) {
console.log(data);
if (data.result === true) {
$("#message").html("<p>File Upload Succeeded</p>");
} else {
$("#message").html("<p>File Upload Failed!</p>");
}
$("#message").append(data.message);
}
});
});
</script>
</body>
</html>
JAVASCRIPT
Use FormData to capture the fields.
Note that instead of handling the button click we handle the submit event.
$('#uploader').submit(function (event) {
event.preventDefault();
$.ajax({
url: window.location.href + '/post',
type: "POST",
dataType: 'json',
data: new FormData(this),
processData: false,
contentType: false,
success: function (data) {
//uncomment the next line to log the returned data in the javascript console
// console.log(data);
if (data.result === true) {
$("#message").html("<p>File Upload Succeeded</p>");
} else {
$("#message").html("<p>File Upload Failed!</p>");
}
$("#message").append(data.message);
}
});
});
CONTROLLER
I've added some code that "reports" results to ajax and will display it on the upload page.
class Upload extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->helper(['form', 'url']);
}
public function index()
{
$this->load->view('upload_v');
}
public function post()
{
$this->load->library("upload");
$this->upload->initialize(array(
"upload_path" => './uploads/',
'allowed_types' => 'gif|jpg|png|doc|txt',
"overwrite" => FALSE,
"max_filename" => 300,
"encrypt_name" => TRUE,
));
$successful = $this->upload->do_upload('userfile');
if($successful)
{
$data = $this->upload->data();
$image_file = $data['file_name'];
$msg = "<p>File: {$image_file}</p>";
$this->data_models->update($this->data->INFO, array("image" => $image_file));
} else {
$msg = $this->upload->display_errors();
}
echo json_encode(['result' => $successful, 'message' => $msg]);
}
}
This will upload your file. Your work probably isn't done because I suspect that your are not saving all the file info you need to the db. That, and I suspect you are going to be surprised by the name of the uploaded file.
I suggest you study up on how PHP handles file uploads and examine some of the similar codeigniter related questions on file uploads here on SO.
Controller
public function upload()
{
$this->load->library('upload');
if (isset($_FILES['myfile']) && !empty($_FILES['myfile']))
{
if ($_FILES['myfile']['error'] != 4)
{
// Image file configurations
$config['upload_path'] = './upload/';
$config['allowed_types'] = 'jpg|jpeg|png';
$this->upload->initialize($config);
$this->upload->do_upload('myfile');
}
}
}
View
<form id="myform" action="<?php base_url('controller/method'); ?>" method="post">
<input type="file" name="myfile">
("#myform").submit(function(evt){
evt.preventDefault();
var url = $(this).attr('action');
var formData = new FormData($(this)[0]);
$.ajax({
url: url,
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (res) {
console.log(res);
},
error: function (error) {
console.log(error);
}
}); // End: $.ajax()
}); // End: submit()
Let me know if any query
you need to submit the form not on click but on submit ... give the form an id and then on submit put ajax
HTML
<?php $attributes = array('id' => 'post'); ?>
<?php echo form_open_multipart(site_url("upload/post",$attributes), ?>
<input type="file" id="userfile" name="userfile" value="">
<button id="post">Submit</button>
<?php echo form_close() ?>
JAVASCRIPT
$('#post').on('submit', function () {
var formData = new FormData();
formData.append("userfile",$("#userfile")[0].files[0]);
$.ajax({
url: window.location.href+'/post',
type: "POST",
data: formData
});
CONTROLLERS
public function post()
{
$this->load->library("upload");
$file = $this->common->nohtml($this->input->post("userfile"));
$this->upload->initialize(array(
"upload_path" => 'upload',
"overwrite" => FALSE,
"max_filename" => 300,
"encrypt_name" => TRUE,
));
$data = $this->upload->data();
$image_file = $data['file_name'];
$this->data_models->update($this->data->INFO, array(
"image" => $image_file
)
);
}
I'm using summernote version 0.8.1 (current).
It's working. But 1 thing I struggle with. Inserting an image, rather than putting base64 dataURL, I want to upload the image to the server and insert the image URL in the database. This is my code:
<script>
$(document).ready(function() {
$('#summernote').summernote({
lang: 'fr-FR',
height: 300,
toolbar : [
['style',['bold','italic','underline','clear']],
['font',['fontsize']],
['color',['color']],
['para',['ul','ol','paragraph']],
['link',['link']],
['picture',['picture']]
],
onImageUpload: function(files, editor, welEditable) {
for (var i = files.lenght - 1; i >= 0; i--) {
sendFile(files[i], this);
}
}
});
function sendFile(file, el) {
var form_data = new FormData();
form_data.append('file',file);
$.ajax ({
data: form_data,
type: "POST",
url: "../up.php",
cache: false,
contentType: false,
processData: false,
success: function(url) {
$(el).summernote('editor.insertImage',url);
}
})
}
});
</script>
I have tested the script up.php and what that does is changing the file name and returning the image's url in the form "../photos/mypicture.jpg".
The problem with the above code is that the ..up.php doesn't even seem to be called. I ran this in Firefox development tools and got no errors or warnings.
I got it working. Here's my code. Using summernote 0.8.1, i.e. current version.
<script>
$(document).ready(function() {
var IMAGE_PATH = 'http://www.path/to/document_root/';
// the exact folder in the document_root
// will be provided by php script below
$('#summernote').summernote({
lang: 'fr-FR', // <= nobody is perfect :)
height: 300,
toolbar : [
['style',['bold','italic','underline','clear']],
['font',['fontsize']],
['color',['color']],
['para',['ul','ol','paragraph']],
['link',['link']],
['picture',['picture']]
],
callbacks : {
onImageUpload: function(image) {
uploadImage(image[0]);
}
}
});
function uploadImage(image) {
var data = new FormData();
data.append("image",image);
$.ajax ({
data: data,
type: "POST",
url: "../up.php",// this file uploads the picture and
// returns a chain containing the path
cache: false,
contentType: false,
processData: false,
success: function(url) {
var image = IMAGE_PATH + url;
$('#summernote').summernote("insertImage", image);
},
error: function(data) {
console.log(data);
}
});
}
});
</script>
Here my up.php :
<?php
require('admchir/nettoie.php');
// nettoie.php removes the French special chars and spaces
$image = nettoie($_FILES['image']['name']);
$uploaddir = 'photos/';
// that's the directory in the document_root where I put pics
$uploadfile = $uploaddir . basename($image);
if( move_uploaded_file($_FILES['image']['tmp_name'],$uploadfile)) {
echo$uploadfile;
} else {
echo "Lo kol kakh tov..."; // <= nobody is perfect :)
}
?>
From looking for this on the internet, I got the impression that summernote changed a lot between the various versions, but didn't find a full working example of the current version. Hope this helps someone.
This is how I integrated it with Codeigniter 3, Summernote 0.8.1:
I am posting my working solution here so that anyone else can get some help or idea on how to implement summernote with image upload in CI 3 with CSRF.
the javascript code:
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<script>
$(document).ready(function () {
$('#content').summernote({
height: 400,
callbacks: {
onImageUpload: function (image) {
sendFile(image[0]);
}
}
});
function sendFile(image) {
var data = new FormData();
data.append("image", image);
//if you are using CI 3 CSRF
data.append("<?= $this->security->get_csrf_token_name() ?>", "<?= $this->security->get_csrf_hash() ?>");
$.ajax({
data: data,
type: "POST",
url: "<?= site_url('summernote-image-upload') ?>",
cache: false,
contentType: false,
processData: false,
success: function (url) {
var image = url;
$('#content').summernote("insertImage", image);
},
error: function (data) {
console.log(data);
}
});
}
});
</script>
the codeigniter part:
//add this line in your routes.php
$route['summernote-image-upload'] = 'welcome/summernote-image-upload';
//now add this method in your Welcome.php Controller:
function summernote_image_upload() {
if ($_FILES['image']['name']) {
if (!$_FILES['image']['error']) {
$ext = explode('.', $_FILES['image']['name']);
$filename = underscore($ext[0]) . '.' . $ext[1];
$destination = './public/images/summernote/' . $filename; //change path of the folder...
$location = $_FILES["image"]["tmp_name"];
move_uploaded_file($location, $destination);
echo base_url() . 'public/images/summernote/' . $filename;
} else {
echo $message = 'The following error occured: ' . $_FILES['image']['error'];
}
}
}
the HTML part:
<textarea name="content" id="content"><?= html_entity_decode(set_value('content')) ?></textarea>
<?= form_error('content') ?>
note if you face issue with CSRF (for any reason), then you can exclude the summernote ajax upload in your config.php file:
$config['csrf_exclude_uris'] = array('summernote-image-upload');
My form is -
<form id="fileupload" method="post" enctype="multipart/form-data">
<input type="file" id="headerimage" spellcheck="true" class="typography" name="headerimage">
</form>
My ajax code is -
var fileData = new FormData($('#fileupload'));
fileData.append('imagefile', $('#headerimage')[0].files);
$.ajax({
type : 'post',
data : fileData,
url : 'UploadImage.php',
dataType: 'json',
processData: false,
success : function(data)
{
alert("done");
},
});
Php code -
<?php
# Data Base Connection
require_once('conn/dbConn.php');
var_dump($_REQUEST);
if (!empty($_FILES)) {
var_dump($_FILES);
}
Please Help. On the php page i am not getting file data.
HTML CODE:
<form id="fileupload" method="post" enctype="multipart/form-data">
<input name="userImage" id="uploadForm" type="file" class="inputFile" />
</form>
AJAX :
<script type="text/javascript">
$(document).ready(function (e){
$("#fileupload").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "UploadImage.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#targetLayer").html(data);
},
error: function(){}
});
}));
});
</script>
Use this javascript
$(document).on("submit", "#fileupload", function(event)
{
event.preventDefault();
$.ajax({
url: 'UploadImage.php',
type: 'POST',
data: new FormData(this),
dataType: 'json',
processData: false,
contentType: false,
success: function (data, status)
{
}
});
});
Try this...
//Image will upload without submit form
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div id="image_preview"><img id="previewing" src="noimage.png" /></div>
<hr id="line">
<div id="selectImage">
<label>Select Your Image</label><br/>
<input type="file" name="file" id="file" required />
</div>
</form>
<script>
$(document).ready(function (e) {
$("#uploadimage").on('change',(function(e) {
e.preventDefault();
$.ajax({
url: "UploadImage.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
}
});
}));
});
</script>
UploadImage.php
<?php
if(isset($_FILES["file"]["type"]))
{
$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
) && ($_FILES["file"]["size"] < 100000)//Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {
if ($_FILES["file"]["error"] > 0)
{
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
}
else
{
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> ";
}
else
{
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
}
}
}
else
{
echo "<span id='invalid'>***Invalid file Size or Type***<span>";
}
}
?>
JS code -
var form = document.getElementById('fileupload');
var fileInput = document.getElementById('headerimage');
var file = fileInput.files[0];
var formData = new FormData();
var filename = '';
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
filaname = xhr.responseText;
}
}
// Add any event handlers here...
xhr.open('POST', form.getAttribute('action'), true);
xhr.send(formData);
PHP code -
<?php
# Data Base Connection
require_once('conn/dbConn.php');
if (!empty($_FILES)) {
$file = $_FILES;
if ($file['file']['error'] == 0) {
$name = explode('.', $file['file']['name']);
$newName = "header.".$name[count($name)-1];
if (move_uploaded_file($file['file']['tmp_name'], "../assets/Themes/Default/".$newName)) {
echo $newName;
exit;
}
} else {
echo "";
exit;
}
} else {
echo "";
exit;
}
I am using dropzone.js.
When I try to delete files only the thumbnails get deleted but not the files from server.
I tried some ways but it just gives me the name of the image which was on client side and not the name on server side(both names are different, storing names in encrypted form).
Any help would be much appreciated..
Another way,
Get response from your server in JSON format or a plain string (then use only response instead of response.path),
dropzone.on("success", function(file, response) {
$(file.previewTemplate).append('<span class="server_file">'+response.path+'</span>');
});
Here, the server can return a json like this,
{
status: 200,
path: "/home/user/anything.txt"
}
So we are storing this path into a span that we can access when we are going to delete it.
dropzone.on("removedfile", function(file) {
var server_file = $(file.previewTemplate).children('.server_file').text();
alert(server_file);
// Do a post request and pass this path and use server-side language to delete the file
$.post("delete.php", { file_to_be_deleted: server_file } );
});
After the process, the preview template will be deleted by Dropzone along with file path stored in a span.
The way I handle this, is after each file is uploaded and stored on the server, I echo back the name I give the file on my server, and store it in a JS object, something like this:
PHP:
move_uploaded_file($_FILES['file']['tmp_name'], $newFileName);
echo $newFileName;
JS:
dropZone.on("success", function(file, serverFileName) {
fileList[serverFileName] = {"serverFileName" : serverFileName, "fileName" : file.name };
});
With this, you can then write a delete script in PHP that takes in the "serverFileName" and does the actual deletion, such as:
JS:
$.ajax({
url: "upload/delete_temp_files.php",
type: "POST",
data: { "fileList" : JSON.stringify(fileList) }
});
PHP:
$fileList = json_decode($_POST['fileList']);
for($i = 0; $i < sizeof($fileList); $i++)
{
unlink(basename($fileList[$i]));
}
Most simple way
JS file,this script will run when you click delete button
this.on("removedfile", function(file) {
alert(file.name);
$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'name': file.name}
});
});
php file "delete.php"
<?php
$t= $_POST['name'];
echo $t;
unlink($t);
?>
The file will be deleteed when you click the "Remove" button :
Put this on your JS file or your HTML file (or your PHP view/action file):
<script type="text/javascript">
Dropzone.options.myAwesomeDropzone = {
// Change following configuration below as you need there bro
autoProcessQueue: true,
uploadMultiple: true,
parallelUploads: 2,
maxFiles: 10,
maxFilesize: 5,
addRemoveLinks: true,
dictRemoveFile: "Remove",
dictDefaultMessage: "<h3 class='sbold'>Drop files here or click to upload document(s)<h3>",
acceptedFiles: ".xls,.xlsx,.doc,.docx",
//another of your configurations..and so on...and so on...
init: function() {
this.on("removedfile", function(file) {
alert("Delete this file?");
$.ajax({
url: '/delete.php?filetodelete='+file.name,
type: "POST",
data: { 'filetodelete': file.name}
});
});
}}
</script>
..and Put this code in your PHP file :
<?php
$toDelete= $_POST['filetodelete'];
unlink("{$_SERVER['DOCUMENT_ROOT']}/*this-is-the-folder-which-you-put-the-file-uploaded*/{$toDelete}");
die;
?>
Hope this helps you bro :)
I've made it easier, just added new property serverFileName to the file object:
success: function(file, response) {
file.serverFileName = response.file_name;
},
removedfile: function (file, data) {
$.ajax({
type:'POST',
url:'/deleteFile',
data : {"file_name" : file.serverFileName},
success : function (data) {
}
});
}
success: function(file, serverFileName)
{
fileList['serverFileName'] = {"serverFileName" : serverFileName, "fileName" : file.name };
alert(file.name);
alert(serverFileName);
},
removedfile: function(file, serverFileName)
{
fileList['serverFileName'] = {"serverFileName" : serverFileName, "fileName" : file.name };
alert(file.name);
alert(serverFileName);
}
When you save the image in upload from there you have to return new file name :
echo json_encode(array("Filename" => "New File Name"));
And in dropzone.js file :
success: function(file,response) {
obj = JSON.parse(response);
file.previewElement.id = obj.Filename;
if (file.previewElement) {
return file.previewElement.classList.add("dz-success");
}
},
And when the dropzone is initialize..
init: function() {
this.on("removedfile", function(file) {
var name = file.previewElement.id;
$.ajax({
url: "post URL",
type: "POST",
data: { 'name': name}
});
});
return noop;
},
Now you will receive new image file and you can delete it from server
You can add id number of uploaded file on the mockFile and use that id to delete from server.
Dropzone.options.frmFilesDropzone = {
init: function() {
var _this = this;
this.on("removedfile", function(file) {
console.log(file.id); // use file.id to delete file on the server
});
$.ajax({
type: "GET",
url: "/server/images",
success: function(response) {
if(response.status=="ok"){
$.each(response.data, function(key,value) {
var mockFile = {id:value.id,name: value.name, size: value.filesize};
_this.options.addedfile.call(_this, mockFile);
_this.options.thumbnail.call(_this, mockFile, "/media/images/"+value.name);
_this.options.complete.call(_this, mockFile);
_this.options.success.call(_this, mockFile);
});
}
}
});
Server Json return for getting all images already uploaded /server/images:
{
"data":[
{"id":52,"name":"image_1.jpg","filesize":1234},
{"id":53,"name":"image_2.jpg","filesize":1234},
]}
In my case server sends back some ajax response with deleteUrl for every specific image.
I just insert this url as 'data-dz-remove' attribute, set in previewTemplate already.
As I use jquery it looks so:
this.on("success", function (file, response) {
$(file.previewTemplate).find('a.dz-remove').attr('data-dz-remove', response.deleteUrl);
});
Later this attr used to send ajax post with this url to delete file on server by removedfile event as mentioned above.
This simple solution will work for single files upload, no need for DOM manipulation.
PHP Upload Script
[...]
echo $filepath; // ie: 'medias/articles/m/y/a/my_article/my-image.png'
JS Dropzones
this.on("success", function(file, response) {
file.path = response; // We create a new 'path' index
});
this.on("removedfile", function(file) {
removeFile(file.path)
});
JS outside of Dropzone
var removeFile = function(path){
//SEND PATH IN AJAX TO PHP DELETE SCRIPT
$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'path': path}
});
}