jquery偽造ajax請求

Question

為了更好地體驗文件上傳，我偽造了ajax請求，即用戶點擊提交，表單消失了加載圖形，在查看秒后頁面刷新以顯示他們的newley上傳圖像。

但是，由於在我的文件上傳中添加jquery總是返回相同的錯誤，

您沒有選擇要上傳的文件。 為什么是這樣？ 這是我的表格，

<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>

和我的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;
});

上傳功能只是codeigniter的基本上傳功能。

Answer 1

出於安全原因，您無法使用XmlHttpRequest對象（AJAX）上載文件。

替代解決方案是：

• 將您的文件提交表單加載到iframe中並使用JS發布
• 使用flash文件上傳器
• 使用HTML5

這是一個非常受歡迎的jQuery插件： http ： //www.uploadify.com/

Answer 2

試試這樣，

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

然后使用php重定向/重新加載頁面

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

如果您不想從PHP重定向，那么您可以使用

• jQuery Form插件http://jquery.malsup.com/form/#file-upload

• SWFUpload http://demo.swfupload.org/v220/index.htm

• （有很多用於上傳文件的庫。）

Answer 3

如果你想學習如何使用jQuery構建自己的上傳，這里有一篇很好的文章 - http://www.peachpit.com/articles/article.aspx?p=1766159