upload file with jquery

Question

I want to upload a file with ajax

here is my code php, html:

<form action="uploadVideo.php" method="POST" enctype="multipart/form-data">  
    <input type="file" name="choosefilebtn" id="choosefilebtn"  size="50" /> 
    <input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />     
</form>

jquery:

$(function() {
    $('#uploadbtn').click(function() {
        var filename = $('#choosefilebtn').val();
        alert(filename);
        $.ajax({
            type: "POST",
            url: "uploadVideo.php",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function() {
                alert("Data Uploaded: ");
            }
        });
    });
});

when I use type sumbmit for upload button ( without ajax) it works, but with ajax it doesnt work, can any body help me, Thanks

Edit: Added uploadVideo.php code

$publish->remotehost=$ftpremotehost;
$publish->username=$ftpusername;
$publish->password=$ftppassword;
$publish->remotedir=CONSTANT_SERVERROOT.$folderName;
$publish->filename=$_FILES['choosefilebtn']['name'];
$publish->FTPLogin();
$publish->filecontent = fread( fopen($_FILES['choosefilebtn']['tmp_name'], "rb"), 
                                     $_FILES['choosefilebtn']['size']);
$publish->makedir($publish->remotedir);
$result=$publish->Publish();

tobyodavies · Accepted Answer · 2011-07-28 09:44:08Z

4

You'll notice with the ajax call you are sending the filename, and not the contents of that file:

    $.ajax({
        //...
        data: {
            file: filename //just a name, no file contents!
        },
        //...
    });

the only way that I am aware of sending file data via ajax is using a hidden iframe and submitting a form to that

i.e. have

<iframe style="display: none" id="formtarget" />
<form action="uploadVideo.php" method="POST"  enctype="multipart/form-data"
    target="formtarget">  
    <input type="file" name="choosefilebtn" id="choosefilebtn"  size="50" /> 
    <input type="button" class="uploadbutton" value="upload" name="uploadbtn" id="uploadbtn" />     
</form>

edited Jul 28, 2011 at 9:44

answered Jul 26, 2011 at 15:17

tobyodavies

28.2k5 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hashem Over a year ago

the code just pass the file name, something like C:\fakepath[myfilename.mp4]

Hashem Over a year ago

It calls the script, and script creates file path, but file path is empty, I suppose it's because my code cant pass the file path properly

tobyodavies Over a year ago

@Hashem, you are also sending the arguments under different names... see my edit. Also what is the code on the uploadVideo.php page

Hashem Over a year ago

thanks for your comments, I changed file:filename to uploadfilebtn:file name, but no change in result this is php code: $publish->remotehost=$ftpremotehost; $publish->username=$ftpusername; $publish->password=$ftppassword; $publish->remotedir=CONSTANT_SERVERROOT.$folderName; $publish->filename=$_FILES['choosefilebtn']['name']; $publish->FTPLogin(); $publish->filecontent = fread( fopen($_FILES['choosefilebtn']['tmp_name'], "rb"), $_FILES['choosefilebtn']['size']); $publish->makedir($publish->remotedir); $result=$publish->Publish();

tobyodavies Over a year ago

right, so you are trying to use the data in the file acording to that code - you are fread ing from it. You'll have to use the iframe approach. jQuery ajax can't send file contents like that.

Christian Gollhardt · Accepted Answer · 2014-08-08 05:26:02Z

markup

<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
    <input name="FileInput" id="FileInput" type="file" />
    <input type="submit"  id="submit-btn" value="Upload" />
    <img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>
</form>
<div id="progressbox">
    <div id="progressbar"></div>
    <div id="statustxt">0%</div>
</div>
<div id="output"></div>

jquery

$(document).ready(function () {
    var options = {
        target: '#output',   // target element(s) to be updated with server response 
        beforeSubmit: beforeSubmit,  // pre-submit callback 
        success: afterSuccess,  // post-submit callback 
        uploadProgress: OnProgress, //upload progress callback 
        resetForm: true        // reset the form after successful submit 
    };

    $('#MyUploadForm').submit(function () {
        $(this).ajaxSubmit(options);
        return false;
    });
});

Collectives™ on Stack Overflow

upload file with jquery

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related