JQuery - 以下代码如何工作?

时间:2012-01-06 04:36:11

标签: jquery

我是JQuery的新手,我会说我对此一无所知。我想开发一个涉及AJAX的小图像上传器。我从谷歌得到了这段代码,我得到了它的工作。现在我必须在上传文件时使用随机图像名称。我的代码是使用图像本身的文件名上传。我真的不知道在哪里可以改变文件命名概念。所以我决定从它开始的地方追查。你能帮助我缩小这个问题的范围吗?所以我也会学习一些JQuery。这是代码。

$(function(){
    $('#swfupload-control').swfupload({
        upload_url: "upload-file.php?p_id=<?php echo $prod_id; ?>",
        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='<tr class="r1" id="'+file.id+'" >'+
            '<td>&nbsp;</td>'+
            '<td><span class="filename"><em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) </span>'+
            '<span class="progressvalue" ></span>'+
            '<div class="progressbar" ><div class="progress" ></div></div>'+
            '<p class="status" >Pending</p></td>'+
            '<td>&nbsp;</td>'+
            '<td><span class="cancel" >&nbsp;</span></td>'+
            '</tr>';
        $('#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 = '<td><img src="images/ProductImages/'+file.name+'" width="50" height="50"/><td/>'
            +'<td>'+file.name+'</td> <td style="text-align: center;">'
            +'<input type="checkbox" value="'+file.name+'" name="main" onClick="update_chk(this.value);"/></td>'
            +'<td>Delete</td>';
        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;
}

1 个答案:

答案 0 :(得分:2)

您使用fileupload,PHP,Java的服务器端技术是什么?在服务器端,您可以生成随机字符串并将其用作文件名而不是默认字符串。

例如在PHP中可以做:

// Where the file is going to be placed
$target_path = 'uploaded_files/';

/* Add the original filename to our target path.
Result is "uploaded_files/filename.extension" */
$target_path = $target_path . basename(md5($_FILES['file']['name'])); 

if(move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['file']['name']).
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
}