Save in the file system images just with jquery ajax
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.
javascript jquery ajax python-2.7
asked Nov 21 '18 at 16:50
M. Gar
329623
add a comment |
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.
javascript jquery ajax python-2.7
asked Nov 21 '18 at 16:50
M. Gar
329623
yes, that's what I try to do
– M. Gar
Nov 21 '18 at 18:19
Hi @peeebeee I think this question is not duplicate because the post you say do not use onlyjquerythey use scripts inphpand I found a lot like that but I need justjqueryorjquerywithpythonscripts notphp
– M. Gar
Nov 21 '18 at 23:54
Try this then (Google has many examples) stackoverflow.com/questions/12166158/upload-a-file-with-python
– peeebeee
Nov 22 '18 at 16:27
add a comment |
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.
javascript jquery ajax python-2.7
asked Nov 21 '18 at 16:50
M. Gar
329623
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.
javascript jquery ajax python-2.7
javascript jquery ajax python-2.7
asked Nov 21 '18 at 16:50
M. Gar
329623
asked Nov 21 '18 at 16:50
M. Gar
329623
asked Nov 21 '18 at 16:50
M. Gar
329623
asked Nov 21 '18 at 16:50
M. Gar
329623
asked Nov 21 '18 at 16:50
M. Gar
329623
329623
yes, that's what I try to do
– M. Gar
Nov 21 '18 at 18:19
Hi @peeebeee I think this question is not duplicate because the post you say do not use onlyjquerythey use scripts inphpand I found a lot like that but I need justjqueryorjquerywithpythonscripts notphp
– M. Gar
Nov 21 '18 at 23:54
Try this then (Google has many examples) stackoverflow.com/questions/12166158/upload-a-file-with-python
– peeebeee
Nov 22 '18 at 16:27
add a comment |
yes, that's what I try to do
– M. Gar
Nov 21 '18 at 18:19
Hi @peeebeee I think this question is not duplicate because the post you say do not use onlyjquerythey use scripts inphpand I found a lot like that but I need justjqueryorjquerywithpythonscripts notphp
– M. Gar
Nov 21 '18 at 23:54
Try this then (Google has many examples) stackoverflow.com/questions/12166158/upload-a-file-with-python
– peeebeee
Nov 22 '18 at 16:27
yes, that's what I try to do
– M. Gar
Nov 21 '18 at 18:19
yes, that's what I try to do
– M. Gar
Nov 21 '18 at 18:19
Hi @peeebeee I think this question is not duplicate because the post you say do not use only
jquery they use scripts in php and I found a lot like that but I need just jquery or jquery with python scripts not php– M. Gar
Nov 21 '18 at 23:54
Hi @peeebeee I think this question is not duplicate because the post you say do not use only
jquery they use scripts in php and I found a lot like that but I need just jquery or jquery with python scripts not php– M. Gar
Nov 21 '18 at 23:54
Try this then (Google has many examples) stackoverflow.com/questions/12166158/upload-a-file-with-python
– peeebeee
Nov 22 '18 at 16:27
Try this then (Google has many examples) stackoverflow.com/questions/12166158/upload-a-file-with-python
– peeebeee
Nov 22 '18 at 16:27
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416922%2fsave-in-the-file-system-images-just-with-jquery-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416922%2fsave-in-the-file-system-images-just-with-jquery-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
yes, that's what I try to do
– M. Gar
Nov 21 '18 at 18:19
Hi @peeebeee I think this question is not duplicate because the post you say do not use only
jquerythey use scripts inphpand I found a lot like that but I need justjqueryorjquerywithpythonscripts notphp– M. Gar
Nov 21 '18 at 23:54
Try this then (Google has many examples) stackoverflow.com/questions/12166158/upload-a-file-with-python
– peeebeee
Nov 22 '18 at 16:27