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>
<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" />
<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>
<script>
$(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 = '<img src="'+imageUrlOnServer+'" title="'+imageUrlOnServer.replace(/.*\//, '')+'" />';
    // 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;
});
});
</script>
</head>
<body>
<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"
          enctype="multipart/form-data"
          action="/api/photos"
          method="post">
      <input type="file" id="userPhotoInput" name="userPhoto" size="50" />
    </form>
    <div id="status" />
    <div class="display"></div>
  </div>
</div>
</body>
</html>

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!

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: