William Jiang

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

NodeJS & Express: upload image file and refresh ALL linked screen (4)

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>
<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" />
<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() {

status('Choose a image file to upload:)');
now.receiveMessage = function(message){

$('#uploadForm').submit(function() {    
    error: function(xhr) {
      status('Error: ' + xhr.status);
    success: function(response) {
      if(response.error) {
        status('Opps, something bad happened');
    var imageUrlOnServer = response.path;
    status('Success, file uploaded to:' + imageUrlOnServer);
    var img = '<img src="'+imageUrlOnServer+'" title="'+imageUrlOnServer.replace(/.*\//, '')+'" />';
    // fresh all online pages.
 // Have to stop the form from submitting and causing a page refresh - don't forget this
 return false;

function status(message) {

$('#userPhotoInput').change(function(e) {
  return false;
<div class="box">
  <h2>Image Stream</h2>
  <hr />
  <p>In the field, input the full URL to your image. You can use the 'Post Image' button to upload it.</p>
  <div class="main">
    <form id="uploadForm"
      <input type="file" id="userPhotoInput" name="userPhoto" size="50" />
    <div id="status" />
    <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!


2 responses to “NodeJS & Express: upload image file and refresh ALL linked screen (4)

  1. yeslol 06/19/2012 at 10:33 am

    Thanks for your share

  2. silver price 06/21/2012 at 5:54 pm

    most things can be harmful if used incorrectly; the ‘web page like a client app’ phrase glosses over the fundamental problem: it appears as though the validation is being done in onChange, and the first onChange validation that fails stops the process. This is the error. Whether the validation is done in a business layer or not, all of the changes must be validated when they occur. Process all of the onChange methods before redisplaying the form, and the problem goes away.

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: