upload image in jquery dialog

Question

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>');

score 1 · Answer 1 · answered Jan 24 '13 at 03:05

1

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

answered Jan 24 '13 at 03:05

JuHyun Lee

139
1
15

score 1 · Answer 2 · edited May 23 '17 at 12:29

1

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 .

edited May 23 '17 at 12:29

Community

1
1

answered Mar 13 '12 at 09:04

Jayantha Lal Sirisena

21,216
11
71
92

I'm trying out the ajaxfileupload but I'm not sure where to put the ajax code. I've tried to put it with the dialog box but nothing is happening: if($("#upload").is(":checked")) { $("#uploadImage") .dialog({ autoOpen:false, title: "Upload Image", height: "auto", width: 300 .ajaxStart(function(){ $(this).show(); }) .ajaxComplete(function(){ $(this).hide(); }) }); – LTech Mar 13 '12 at 10:09
I think it's better if you append your new code in the question. – Jayantha Lal Sirisena Mar 13 '12 at 10:15

upload image in jquery dialog

2 Answers2