William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

NodeJS & Express: get URL image and refresh ALL linked screen (2)

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>
<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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script src="/nowjs/now.js"></script>
$(document).ready(function() {
 now.receiveMessage = function(message){
 $('#uploadForm').submit(function() {
   var str = $('#userPhotoInput').val();
   if(str=='' || /^\s+$/.test(str)) {
    status('Error: please input full URL!');
    return false;
   var expr1 = /(http|https|ftp):\/\/(\w+:{0,1}\w*@)?(\S+)
   var re1 = new RegExp(expr1);
   if(! str.match(re1)) {
    status('Error: please input a correct URL');
    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.');
    return false;
    error: function(xhr) {
    status('Error: ' + xhr.status);
   success: function(response) {
     if(response.error) {
     var imageUrlOnServer = response.path;
     var img = '<img src="/images/'+imageUrlOnServer+'" 
        title="'+imageUrlOnServer+'" />';
     // fresh all online pages.
  return false;

 function status(message) {
<div class="box">
  <h2>Image Stream</h2>
  <hr />
  <p>In the field, input the full URL to your image. 
      Use the 'Submit Image' button to upload it.</p>
  <div class="main">
    <form action="/api/photos" method="post" id="uploadForm">
      <input type="text" name="userPhotoInput" 
       id="userPhotoInput" placeholder="specify image URL...." 
       data-prompt-position="topLeft" autocomplete="on" size="50" />
      <input type="submit" value="Submit Image" />
    <div id="status"> </div>
    <div class="display"></div>

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!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: