CODEWITHSUNDEEP
file-uploaddialog
LTech
LTech

Reputation: 1771

upload image in jquery dialog

I have an 'upload' jquery dialog box which displays a html upload form. I can't work out where to put the php form submission so I can check the code has worked. Also the image is being uploaded in the middle of editing a page so it is very important the page doesn't reload and the changes aren't lost (a user won't save his edits before adding the image). How do I submit the upload and keep everything within the dialog box so the page isn't reloaded and then I can make an 'insert' code to put the uploaded image in the page? Thanks, my code is: 

public static function uploadImage(){
global $wgOut, $wgRequest;  

    $posted = $wgRequest->wasPosted();
    if( $posted ) {
    $wgOut->addHtml(' Maximum upload size: 2M <br />');
        }
    // form processing message set at the top if(!empty($message)){$wgOut->addHtml('$message'); }; 
    $wgOut->addHtml(' Upload an Image from your computer: <br />'); 
    $wgOut->addHtml('<form action="" enctype="multipart/form-data" method="Post">
            <input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
            <input type="file" name="file_upload" id="file_upload" /> 
        <br />
        <input type="submit" name="upload" value="Upload" />
        </form>
        '); 
$wgOut->addHtml(' Maximum upload size: 2M <br />');
$wgOut->addHtml('Permitted file types: png,gif,jpg,jpeg.'); 

}

jquery: 

$("#uploadImage")
                                    .dialog({
                                    autoOpen:false,
                                    title: "Upload Image",
                                    height: "auto",
                                    width: 300
                                    });

                                $("#uploadImage").dialog("open");

                                     };

and 

$wgOut->addHTML('<div id="uploadImage" style="display:none">');
     $form = self::uploadImage();   
     $wgOut->addHtml($form);
    $wgOut->addHTML('</div>');

Upvotes: 1

Views: 1811

Answers (2)

JuHyun Lee
JuHyun Lee

Reputation: 139

Now, 2013 Year. You Can upload file with ajax But, you have to add ajaxForm Plugin, Search it! in google

Upvotes: 1

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21376

You can't upload files using jquery post. You can use another plugin like ajaxfileupload It will create a tempory IFrame inside your DOM and will do the file uploading by only refreshing that IFrame.
And you can use HTML5 file uploading you need to look at the browser support.
Or else you can use flash file uploaders .

Upvotes: 1

Related Questions