NodeJS & Express: upload image file and refresh ALL linked screen (4)
Blogs20122012-06-05
NodeJS & Express: upload image file and refresh ALL linked screen (2)
This is the client-side codes for auto refresh web-screens when uploading image.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Node Practical Test - William Jiang - upload Image from local machine</title>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://malsup.github.com/jquery.form.js
/nowjs/now.js
$(document).ready(function() {
status('Choose a image file to upload:)');
now.receiveMessage = function(message){
$(message).addClass('img_space').appendTo('div.display');
}
$('#uploadForm').submit(function() {
$(this).ajaxSubmit({
error: function(xhr) {
status('Error: ' + xhr.status);
},
success: function(response) {
if(response.error) {
status('Opps, something bad happened');
return;
}
var imageUrlOnServer = response.path;
status('Success, file uploaded to:' + imageUrlOnServer);
var img = '';
// fresh all online pages.
now.distributeMessage(img);
}
});
// Have to stop the form from submitting and causing a page refresh - don't forget this
return false;
});
function status(message) {
$('#status').text(message);
}
$('#userPhotoInput').change(function(e) {
e.preventDefault();
$('#uploadForm').submit();
return false;
});
});
</head>
<body>The codes include all basic features: placeholder, validation, mouse locator, sync auto refresh, google CDN, ‘onChange’ event to auto upload, dynamic warning/error display, etc.
Plus the Server-side app.js, and css file which is simple and not list here, the application looks very cool!