jQuery伪造一个ajax请求

To make a nicer experience of a file upload, I am faking an ajax request i.e The user clicks submit, the form dissapears a loading graphic appears and after a view seconds the page refreshs to show their newley upload image.

However since adding the jquery in my file upload always returns the same errors,

You did not select a file to upload. Why is this? This is my form,

<div id="picture_upload">
        <div class="loading"></div>
        <?php echo form_open_multipart('my_profile/do_upload'); ?>

        <strong>Choose pictures to upload</strong>
        <p>Max file size: 1MB .jpeg, .gif, .png or .bmp</p>
        <input type="file" name="userfile" />
    </div>
    <!--<div id="webcam_upload">
        <p>Hello</p>
    </div>-->
</div>
<div id="bottom"><table><tr><td><input type="submit" id="submit_upload" value="Upload a picture" class="button green rounded_5 small" /></td><td>or</td><td><a href="#" id="close_modal" />Cancel</a></td></tr></table></div>

and my js,

$("#submit_upload").click(function(e){
    //alert("here");
    setTimeout(function() { $("#picture_upload form").submit();}, 6000);
    $("#picture_upload").children().hide();
    $(".loading").show();
    setTimeout( function() {  location=$("#picture_upload form").attr('action') }, 1500 );
    return false;
});

The upload function is just your basic upload function from codeigniter.

For security reasons You can't upload a file using an XmlHttpRequest object (AJAX).

Alternative solutions are:

  • Load your file submission form in an iframe and post that with JS
  • Use a flash file uploader
  • Use HTML5

Here's a jQuery plugin that appears quite popular: http://www.uploadify.com/

Try like this,

$("#submit_upload").click(function(e){
    //alert("here");
    setTimeout(function() { $("#picture_upload form").submit();}, 6000);
    $("#picture_upload").children().hide();
    $(".loading").show();
    return false;
});

And then redirect/reload the page using php

header('Location: URL_TO_REDIRECT'); //put it in your end of upload script in php file

If you don't want to redirect from PHP then, you can use

If you want to learn how to build your own upload using jQuery here is a good article - http://www.peachpit.com/articles/article.aspx?p=1766159