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