How to upload image file that converted thumbnails with javascript & PHP?
<p>I have some code in which, before uploading the original images, it creates thumbnail images.
What I want to do is, instead of uploading the client's original images, I'd like to upload the thumbnail images. The reason is that the originals image files are usually too big, and my system's OK with very small images such as thumbnails. How can I achieve my goal?</p>

<p>Here is my code so far:</p>

<h3>PHP code:</h3>

<pre><code>if (isset($HTTP_POST_VARS['action'])) {
   $SafeFile = $_FILES['client_image']['name'];
}
</code></pre>

<h3>HTML code:</h3>

<pre><code>&lt; input type="file"  valign=middle  name="client_image" id="client_image" &gt;
&lt; output id="list" &gt; &lt;  /output&gt;
</code></pre>

<h3>JavaScript code:</h3>

<pre><code>document.getElementById('client_image').addEventListener('change', handleFileSelect, false);
function handleFileSelect(evt) {
    var files = evt.target.files; 
    for (var i = 0, f; f = files[i]; i++) {
        // Only process image files.
        if (!f.type.match('image.*')) {
            continue;
        }
        reader.onload = (function(theFile) {
            return function(e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['&lt;img class="thumb" id="thumb_image" src="', e.target.result,
                                '" title="', escape(theFile.name), '"/&gt;'].join('');
                document.getElementById('list').insertBefore(span, null);
            };  
        })(f);
    }
}
</code></pre>
