JQuery - How the following code works?
<p>I am new to JQuery and i would say i know nothing in that. I wanted to develop a little image uploader involving AJAX. I got this piece of code from google and i got it working. Now i have to use a random image name while uploading the file. The code i have is uploading with the file name of the image itself. I really don't know where to look at to change the file naming concept. So i decided to trace down from where it starts. Can you guys help me narrow down the issue ? So i will learn some JQuery  as well. Here is the code.</p>

<pre><code>$(function(){
    $('#swfupload-control').swfupload({
        upload_url: "upload-file.php?p_id=&lt;?php echo $prod_id; ?&gt;",
        file_post_name: 'uploadfile',
        file_size_limit : "1024",
        file_types : "*.jpg;*.png;*.gif",
        file_types_description : "Image files",
        file_upload_limit : 5,
        flash_url : "js/swfupload/swfupload.swf",
        button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
        button_width : 114,
        button_height : 29,
        button_placeholder : $('#button')[0],
        debug: false
    })
    .bind('fileQueued', function(event, file){
        //alert(file.name);
        var listitem='&lt;tr class="r1" id="'+file.id+'" &gt;'+
            '&lt;td&gt;&amp;nbsp;&lt;/td&gt;'+
            '&lt;td&gt;&lt;span class="filename"&gt;&lt;em&gt;'+file.name+'&lt;/em&gt; ('+Math.round(file.size/1024)+' KB) &lt;/span&gt;'+
            '&lt;span class="progressvalue" &gt;&lt;/span&gt;'+
            '&lt;div class="progressbar" &gt;&lt;div class="progress" &gt;&lt;/div&gt;&lt;/div&gt;'+
            '&lt;p class="status" &gt;Pending&lt;/p&gt;&lt;/td&gt;'+
            '&lt;td&gt;&amp;nbsp;&lt;/td&gt;'+
            '&lt;td&gt;&lt;span class="cancel" &gt;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;'+
            '&lt;/tr&gt;';
        $('#log').append(listitem);
        $('tr#'+file.id+' .cancel').bind('click', function(){
            var swfu = $.swfupload.getInstance('#swfupload-control');
            swfu.cancelUpload(file.id);
            $('tr#'+file.id).slideUp('fast');
        });
        // start the upload since it's queued
        //alert(this.getAttribute("id"))
        $(this).swfupload('startUpload');
    })
    .bind('fileQueueError', function(event, file, errorCode, message){
        alert('Size of the file '+file.name+' is greater than limit');
    })
    .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
        $('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
    })
    .bind('uploadStart', function(event, file){
        $('#log tr#'+file.id).find('p.status').text('Uploading...');
        $('#log tr#'+file.id).find('span.progressvalue').text('0%');
        $('#log tr#'+file.id).find('span.cancel').hide();
    })
    .bind('uploadSuccess', function(event, file, serverData){
        var item=$('#log tr#'+file.id);
        var content = '&lt;td&gt;&lt;img src="images/ProductImages/'+file.name+'" width="50" height="50"/&gt;&lt;td/&gt;'
            +'&lt;td&gt;'+file.name+'&lt;/td&gt; &lt;td style="text-align: center;"&gt;'
            +'&lt;input type="checkbox" value="'+file.name+'" name="main" onClick="update_chk(this.value);"/&gt;&lt;/td&gt;'
            +'&lt;td&gt;Delete&lt;/td&gt;';
        item.html(content);

    })
    .bind('uploadProgress', function(event, file, bytesLoaded){
        //Show Progress
        var percentage=Math.round((bytesLoaded/file.size)*100);
        $('#log tr#'+file.id).find('div.progress').css('width', percentage+'%');
        $('#log tr#'+file.id).find('span.progressvalue').text(percentage+'%');
    })

    .bind('uploadComplete', function(event, file){
        // upload has completed, try the next one in the queue
        $(this).swfupload('startUpload');
    })

});
function update_chk(value){
    document.getElementById("main_name").value = value;
}
</code></pre>
