Ajax form upload local image file without refresh

June 22, 2009 at 8:56 pm by rick · Filed under Javascript

The code example below performs following tasks:

  • Upload multiple image files without refresh page.
  • Control maximum number of image files to be uploaded.
  • Instantly review uploaded images.

Basic idea:

You have a Form #1 with input element with type “file” to let user to select what images to be uploaded. Also, you need a hidden Form #2 and hidden iframe to do the upload action implicitly. When user select a file, the value of input element needed in Form #2. However, for security reason, browsers are not allow us to manipulate the value of input element, therefore directly copy value of input element to another is not the way to achieve our goal. But, how about copy the whole input element to Form #2? Here is the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script  type="text/javascript">
var frameId = 'frame_ID';      //hidden frame id
var jFrame = null;                //hidden frame object
var formId = 'form_ID';         //hidden form id
var jForm = null;                 //hidden form object
var token = "random_token";  //random session token, for server-side script use
var fileMax = 5;                  //maximum number of file to be uploaded
var fileCount = 0;               //file counter
var uploadUrl = "/save.php"; //where to handle uploaded image
 
 
$(document).ready(function(){                     
 
jForm = createForm(formId,token);       //create hidden form
jFrame = createUploadIframe(frameId)   //create hidden iframe
 
//append hidden form to hidden iframe, change top and left to a large negative number to make it invisable
jForm.appendTo('body').css({position: 'absolute',top: '150px',left: '350px'});         
 
jForm.attr('target',frameId);              //make form target to iframe
 
 
$("#inp").bind('change',startUpload);   //bind onchange function to input element
 
function startUpload(){
   if(jForm!=null){               
      jForm.remove();                        //re-create hidden form
      jForm = createForm(formId,token);
      jForm.appendTo('body').css({position: 'absolute',top: '150px',left: '350px'});
      jForm.attr('target',frameId);
   }
 
   var newElement = $(this).clone(true);   //clone input element object
   newElement.bind('change',startUpload); //bind onchange function. start uploading when file selected
   newElement.insertAfter($(this));          //insert clone object to current input element object
   $(this).appendTo(jForm);                    //move current input element along with its value to hidden form
 
 
   $("loading").show();               //show loading icon 
   jForm.submit();                     //let's upload the file
 
   jFrame.unbind('load');                  
   jFrame.load(function(){               //bind onload function to hidden iframe
 
      //get response message from hidden iframe
      var myFrame = document.getElementById($(this).attr('name'));   
      var response = $(myFrame.contentWindow.document.body).text();
 
      /*
      * you may handle upload status from reponse message.
      * in this example, upload succeeded if message contains image url, otherwise, alert reponse message
      */
 
      if(response.indexOf('http://')!=-1){ //upload successfully
 
         addUpload(Math.floor(Math.random()*100),response);   //show thumbnails, assign a id for future reference
         fileCount++;
         if(fileCount >= fileMax){                     //reach maximum upload file, disable input element
            $("#inp").attr('disabled','disable');
         }
      }else{  //error
         alert(response);
      }
 
      //hide loading icon
      $("loading").hide();
   });
}
 
 
});
 
function createUploadIframe(id){
   //set top and left to make form invisible
   return $('<iframe width="200" height="200" name="' + id + '" id="' + id + '"></iframe>')
         .css({position: 'absolute',top: '270px',left: '350px'})
         .appendTo('body');
}
 
function createForm(formId,token) {
      return $('<form method="post" action="'+uploadUrl+'" name="' + formId + '" id="' + formId + 
            '" enctype="multipart/form-data" style="position:absolute;border:1px solid #f00;'+
            'width:200px;height:100px">' +
            '<input type="hidden" name="token" value="' + token + '"/>' +
            '</form>');
}
 
function addUpload(id,img){
   var div = $(document.createElement('div')).attr('id',id);
   div.html("<img src='"+img+"'> ");
 
   //add remove thumbnail link
   var rem = $(document.createElement('a')).attr('alt',id).attr('href','javascript:;').text("Remove").click(removeUpload);      
 
   rem.appendTo(div);
   div.appendTo("#uploaded_thumb");
}
 
function removeUpload(e){
   var removeId = $(e.target).attr('alt');
   $('#'+removeId).remove();
   if(fileCount>0) fileCount--;
   $("#inp").removeAttr('disabled');
}
</script>
 
</head>
<body>
  <form>
   <div id='uploaded_thumb'></div>
   <div style='display:none' id='loading'><img src='/images/loading2.gif'></div>
   <input type='file' name='image' id='inp'>
  </form>
</body>
</html>

Comments (1)

Plesk common shell commands

June 8, 2009 at 1:02 pm by Nelson · Filed under Linux

Reload vhost.conf for single domain

1

/usr/local/psa/admin/sbin/websrvmng --reconfigure-vhost --vhost-name=

Comments

Subversion client for Windows command line output unreadable characters

May 7, 2009 at 11:16 pm by Nelson · Filed under Windows

If you use subversion client windows command line

1

svn help

on a Windows system with current language for non-Unicode programs set to a different language such as Chinese Simplified.
You probably will see a screen with strange characters - garbage output in command prompt window.
It’s very easy to fix this by set an environment variable for your system

1

Set LANG=C

Comments

Backup newly modified files

February 1, 2009 at 10:27 pm by rick · Filed under Linux

My server backups over 20GB files everyday. It takes hours to tar those huge amount of files. I think this kind of stupid task is harmful to hard driver. One more stupid issue is that over 99% of files are not modified since last backup. So, here is the command to let me backup newly modified files only.

tar -zcvf /save/to/file.tar /filePath/* –newer-mtime ‘1 days ago’

You may want to change “1 days ago” to 2 days, or 5 days.

By the way, it’s better to do full backup monthly or bi-monthly. :)

Comments (1)

Linux - delete files which modified time older than 7 days

February 1, 2009 at 10:13 pm by rick · Filed under Linux

find /filePath/* -mtime +7 -delete

or

find /filePath/* -mtime +7 -exec rm {} \;

Where “-mtime” parameter will look for file modified time older than “+7″ days. You may want to change “+7″ to longer days, for example “+30″ days, “+90″ days

“-exec” parameter allows you to call another command. The “{} \;” is required at the end.

Comments

ffmpeg - capture screenshot from a video file

December 12, 2008 at 9:53 pm by rick · Filed under Linux 

1

ffmpeg -i /my_video_file_dir/video.flv -y -f image2 -ss 8 -sameq -t 0.001 -s 320*240 /image_dir/screenshot.jpg

320*240 : image dimension is 320 pixels width and 240 pixels height
-ss 8 : screenshot will be taken at 8 second after video starts.

Comments (1)

Linux ffmpeg audio conversion - MP3 to FLV

December 4, 2008 at 11:18 pm by rick · Filed under Linux

Want to play MP3 files on your website? The best and most common way is using flash video file which compress audio and video better for internet use like YouTube. Here is the instruction I used ffmpeg to convert MP3 to FLV file.

ffmpeg - a program that allow convert audio in numerous formats.

Installing ffmpeg
edit / etc/yum.repos.d/CentOS-Base.repo , add following lines at the end of file

1
2
3
4

[dag]
name=Dag RPM Repository for Centos
baseurl=http://apt.sw.be/redhat/el$releasever/en/$basearch/dag
enabled=1

run this command

1

yum install ffmpeg

Convert MP3 to FLV

1

ffmpeg -y -i /home/song.mp3 -f flv -acodec mp3 -ab 64 -ac 1 /home/song.flv

Comments

Sending text message (SMS) to your mobile phone from your server via GMail SMTP using PHP

December 3, 2008 at 11:05 pm by rick · Filed under PHP

In some cases I need to send a warning message or a notice to my cell phone when certain tasks are done or caught some unexpected errors by server cronjob. This is a quite exciting feature, I don’t need to sit in front of my computer to do the boring monitoring job.

With some googling, there is something called Email to SMS Gateway (here is the gateway list) that allow you to send an Email to phone company, and phone company automatically delivery the Email content as text message to the cell phone owner. In my case, for example, I need to send SMS to cell phone number 416-999-9999 and phone carrier is Rogers. Regarding to the gateway list, means I should send Email to 4169999999@pcs.rogers.com

My first thought about sending out Email is using simple PHP mail() function. Unluckily, the Email sent out couldn’t pass phone carrier’s spam filter (Not exactly know what happened, my guess is my domain can’t pass Reverse DNS checking).

With some googling again for sloving send out Email issue, I found out GMail accounts can actually be used as an SMTP server. If this is working, that means phone carrier directly receive email from GMail (email from GMail won’t be spam, right?).

Here’s a code snippet on how to do it. In the code, I used PHPMailer class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

 
require("class.phpmailer.php");
 
$mail = new PHPMailer();
$mail->IsSMTP(); // send via SMTP
$mail->SMTPAuth = true; // turn on SMTP authentication
 
$mail->Username = "YOUR_GMAIL_ACCOUNT@gmail.com"; // SMTP username
$mail->Password = "YOUR_GMAIL_LOGIN_PASSWORD"; // SMTP password
 
$from_email = "example@example.com"; //Reply to this email ID
$to_email="4169999999@pcs.rogers.com"; // Recipients email ID
$to_name="to_this_name"; // Recipient's name
 
$mail->From = $from_email;
$mail->FromName = "from_this_name";
$mail->AddAddress($to_email,$to_name=);
$mail->AddReplyTo($from_email,"Webmaster");
$mail->WordWrap = 50; // set word wrap
 
$mail->Subject = "TEXT_MESSAGE_SUBJECT";
$mail->Body = "TEXT_MESSAGE_CONTENT"; //HTML Body
$mail->AltBody = "TEXT_MESSAGE_CONTENT"; //Text Body
 
$mail->Send();

Have fun!

Comments

Simple helloworld c++ program to test noexec tmp partition

December 3, 2008 at 11:46 am by Nelson · Filed under Linux 

1
2
3
4
5
6
7

#include <iostream>
 
int main()
{
  std::cout << "Hello world, compiled with g++ on linux" << std::endl;
  return 0;
}

compile this and move to your secured tmp partition and execute it. If you get a permission error, tmp partition is mounted correctly with noexec.

Comments

Synchronize linux date and time using ntpdate

December 1, 2008 at 12:15 pm by rick · Filed under Linux

ntpdate synchronize and set computers’ date and time via Network Time Protocol (NTP) server(s).

1

/usr/sbin/ntpdate -u 0.fedora.pool.ntp.org

0.fedora.pool.ntp.org is NTP server. If this server is not working, find another one.

Comments