jquery伪造一个ajax请求


jquery faking an ajax request

为了获得更好的文件上传体验,我伪造了一个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;
});
上传

功能只是您从代码点火器上传的基本功能。

出于安全原因,不能使用 XmlHttpRequest 对象 (AJAX) 上载文件。

替代解决方案包括:

  • 在 iframe 中加载您的文件提交表单并使用 JS 发布
  • 使用闪存文件上传程序
  • 使用 HTML5

这里有一个看起来很流行的jQuery插件:http://www.uploadify.com/

试试这样,

$("#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 表单插件 http://jquery.malsup.com/form/#file-upload

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

  • (有许多用于上传文件的库。
如果你想

学习如何使用jQuery构建自己的上传,这里有一篇好文章 - http://www.peachpit.com/articles/article.aspx?p=1766159