Member Avatar for moblyft

I have two pages one called upload-file.php, this page uploads the image into the database and my folder.

My PHP page looks like this.

    if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file))  
    { 



        $insert=mysql_query("insert into match_item_image set item_id='".$_SESSION["session_temp"]."', image='".$name."',   adid='$adid'") or die(mysql_error());
$cc=mysql_insert_id();
        echo "success".$cc;

My other page consist of a javascript function which displays my images upon upload.
The problem I am having is that I need to change the image name when uploading it into my folder. I was able to change the image name but when I upload the image it displays blank because the JavaScript function Is looking for the original name of the image, when the users uploads the file.

This is part of the function:

$(function()


{

    var btnUpload=$('#upload');
    var status=$('#status');
    new AjaxUpload(btnUpload, {
    action: 'upload-file.php',
    name: 'uploadfile',
    onSubmit: function(file, ext)
    {
     if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
     // extension is not allowed 
    status.text('Only JPG, PNG or GIF files are allowed');
    return false;
    }status.text('Uploading...');
    },

    onComplete: function(file, response)
    {
        //On completion clear the status
        status.text('');
        //Add uploaded file to list
        var bb=response.substr(0,7)
        var idd=response.replace('success',' ');
        var idb =idd.replace(/^\s*|\s*$/g,'');
        if(bb==="success")
        {


            $('<span id='+idd+'></span>').appendTo('#files').html('<img src="upload/+file+" alt="" width="290" height="330" class="image1" /><br><a href="javascript:void(0)"    onClick="deleteFile('+idd+');"  class="image1"   > <span   style="font-weight:bold;   font-size:14px; color:red;" >   Delete     </span></a>').addClass('success');
        }
        else 
        {
            $('<span></span>').appendTo('#files').text(response).addClass('error');
        }

Please let me know if anyone can help.

I am new to javascript.

  • 2 Contributors
  • 1 Reply
  • 251 Views
  • 2 Minutes Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

— the problem is that your server-side script renames the file but the client-side code still uses the original client filename (file) for the image src. The upload handler currently returns only an id (you parse "success" + id), so the browser never learns the actual saved filename. The clean fix is to return the saved filename (and id) from PHP and use that value when building the DOM.

Send a JSON response from PHP (no extra whitespace/BOM) so the client can reliably parse it:

header('Content-Type: application/json');

if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $destination)) {
    // $savedName is the filename you actually wrote to disk (preserve extension)
    // insert DB row and get $id...
    echo json_encode(['status'=>'success','id'=>$id,'filename'=>$savedName]);
    exit;
}

echo json_encode(['status'=>'error','message'=>'upload failed']);
exit;

Then parse the JSON in your onComplete and create the <img> using the returned filename:

onComplete: function(file, response) {
  var data = JSON.parse(response);
  if (data.status === 'success') {
    var $span = $('<span>').attr('id', data.id).addClass('success');
    var $img  = $('<img>').attr({ src: 'upload/' + data.filename, width: 290, height: 330, alt: '', class: 'image1' });
    var $del  = $('<a href="javascript:void(0)">').on('click', function(){ deleteFile(data.id); })
                 .html('<span style="font-weight:bold;font-size:14px;color:red">Delete</span>');
    $span.append($img, '<br>', $del).appendTo('#files');
  } else {
    // handle error
  }
}

Extra tips: preserve the original extension with pathinfo(), generate unique names (e.g. uniqid()), validate MIME type and size, and ensure your PHP prints nothing else before the JSON. Also consider migrating from mysql_* to mysqli or PDO for prepared statements and better security. Debugging hint: check the Network tab to inspect the exact server response before parsing.

Member Avatar for Taywin

Err... Wrong forum... Mod, please move this post... Also, go to this forum or this forum and you should find an answer to what you are looking for. I have seen the exactly the same question before...

Edited by Taywin
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.