NodeJS & Express: get URL image and refresh ALL linked screen (2)
Blogs20122012-06-02
NodeJS & Express: get URL image 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 URL</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() {
now.receiveMessage = function(message){
$(message).addClass('img_space').appendTo('div.display');
}
$('#uploadForm').submit(function() {
var str = $('#userPhotoInput').val();
if(str=='' || /^s+$/.test(str)) {
status('Error: please input full URL!');
$('#userPhotoInput').focus();
return false;
}
var expr1 = /(http|https|ftp)://(w+:{0,1}w*@)?(S+)
(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?/gi;
var re1 = new RegExp(expr1);
if(! str.match(re1)) {
status('Error: please input a correct URL');
$('#userPhotoInput').select().focus();
return false;
}
var expr2 = /.(gif|jpg|jpeg|png|ico|bmp)$/gi;
var re2 = new RegExp(expr2);
if(! str.match(re2)) {
status('Error: please input a correct image file.');
$('#userPhotoInput').select().focus();
return false;
}
$('#status').fadeOut(100);
$(this).ajaxSubmit({
error: function(xhr) {
status('Error: ' + xhr.status);
},
success: function(response) {
if(response.error) {
status(response.error);
return;
}
var imageUrlOnServer = response.path;
var img = '';
// fresh all online pages.
now.distributeMessage(img);
}
});
return false;
});
function status(message) {
$('#status').addClass('warning').text(message).fadeIn(100);
}
});
</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!