Upload files after dragging and dropping them in JavaScript and Perl

subUploadFiles(){
    my@files=$q->param('upload');
    foreach my$file(@files){
        my$tmp=$q->tmpFileName($file);
        $file=basename($file);
        my$path=".";
        my$newfile="$path/$file";
        copy($tmp,$newfile);
        $newfile=decode('UTF-8', $newfile);

        Uploaded $err.=$newfile."";
    }
}

<form name="form" action="./sfs.cgi" method="POST" enctype="multipart/form-data">
<p>
<input type="file" name="upload" size="100" multiple/>
<button type="submit" name="submit" value="upload">Upload</button>
</p>
</form>

<script type="text/javascript">
// Hide area if File API is not supported
if(!window.File){
    document.getElementById('image_upload_section').style.display="none";
}

// Suppresses the behavior of deploying files on a browser
function onDragonOver(event){
    event.preventDefault();
}

// File property information read processing when dropped into the drop area
function onDrop(event){
    // Suppresses the behavior of deploying files on a browser
    event.preventDefault();

    // Browse files properties for dropped files
    var files = event.dataTransfer.files;
    for (vari=0;i<files.length;i++) {
        // Upload one at a time
        imageFileUpload(files[i]);
    }
}

// file upload
function imageFileUpload(f){
    var formData = new FormData();
    formData.append('image',f);
    $.ajax({
        type: 'POST',
        contentType: false,
        processData: false,
        url: './sfs.cgi',
        data —FormData,
        dataType: 'json',
        success:function(data){
            alert("ok!");
        }
    });
}
</script>