It's possible to store images in the filesystem just using jquery/ajax
? and if is not possible how can I do it using python
I found a lot of examples with php
but I can do it just with JQuery
or JQuery/Python
?
This is my scrip with JQuery
:
$(document).ready(function () {
if (window.File && window.FileReader && window.FormData) {
var $inputField = $('#file');
$inputField.on('change', function (e) {
var file = e.target.files[0];
if (file) {
if (/^image\//i.test(file.type)) {
readFile(file);
} else {
alert('Not a valid image!');
}
}
});
} else {
alert("File upload is not supported!");
}
function readFile(file) {
var reader = new FileReader();
reader.onloadend = function () {
processFile(reader.result, file.type);
}
reader.onerror = function () {
alert('There was an error reading the file!');
}
reader.readAsDataURL(file);
}
function processFile(dataURL, fileType) {
var maxWidth = 800;
var maxHeight = 800;
var image = new Image();
image.src = dataURL;
image.onload = function () {
var width = image.width;
var height = image.height;
var shouldResize = (width > maxWidth) || (height > maxHeight);
if (!shouldResize) {
sendFile(dataURL);
return;
}
var newWidth;
var newHeight;
if (width > height) {
newHeight = height * (maxWidth / width);
newWidth = maxWidth;
} else {
newWidth = width * (maxHeight / height);
newHeight = maxHeight;
}
var canvas = document.createElement('canvas');
canvas.width = newWidth;
canvas.height = newHeight;
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0, newWidth, newHeight);
dataURL = canvas.toDataURL(fileType);
sendFile(dataURL);
};
image.onerror = function () {
alert('There was an error processing your file!');
};
}
function sendFile(fileData) {
var formData = new FormData();
formData.append('imageData', fileData);
$.ajax({
type: 'POST',
url: 'here/some/filesystem/dir',
data: formData,
contentType: false,
processData: false,
success: function (data) {
if (data.success) {
alert('Your file was successfully uploaded!');
} else {
alert('There was an error uploading your file!');
}
},
error: function (data) {
alert('There was an error uploading your file!');
}
});
}
});
Using just JQuery
gives me this error:
Failed to load file:///here/some/filesystem/dir: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
So I use IIS web server but gives me this error:
403 (FORBIDDEN)
Even when I give all the permissions to the IIS user
If is only possible using a backend lenguaje Can someone direct to me to some tutorial or where I can learn this, use Python
as the php
way, something like:
$.ajax({
type: 'POST',
url: 'upload.php',
//BUT USING PYTHON
$.ajax({
type: 'POST',
url: 'upload.py',
Thank you in advance any question about this please ask me.