当前位置: 首页 > JS > 图片无刷新上传原理(iframe形式)

图片无刷新上传原理(iframe形式)

  • 分类:JS
  • 本文标签: 图片上传
  • 发布时间:2015-09-15 14:30:53
  • 作者:Ferman
  • 查看数: 207

很多时候我们想要无刷新上传图片的时候都会去用第三方的插件,比如uploadify、qqupload、ajaxupload,这些工具也都很好用,尤其是在涉及到多图上传的时候,我这里介绍的是一种iframe形式的简单的无刷新上传,非常方便,简单。我的博客后台想文章中添加图片用的上传就是这个。

1、向页面添加上传按钮和iframe

首先定义一个上传图片的按钮,并且定义一个iframe,绑定一个onchangge事件,目的是选择图片后直接上传注意form中的target要指向iframe,代码如下所示:

<form id="cuiPicform" action="index.php?c=xxx&a=uploadImg" method="post" enctype="multipart/form-data" target="hidframe" name="cuiPicform">
    <input id="uploadButton" name="uppic" type="file" onchange="onPreview(this)">
</form><iframe name="hidframe" id="hidframe" scrolling="no" frameborder="0"></iframe>

页面中js代码如下:

//在php脚本中会调用这个函数(第2点)    
function addPic(webPath, imgId) {
    varimgStr = '<img src="' + webPath + '"><a imgId="' + imgId + '"></a>';
    document.getElementById("cuiPicform").innerHTML = imgStr;
}
//绑定上传事件
function onPreview(file) {
    document.getElementById('cuiPicform').submit();
}

2.uploadImg方法在后台处理上传的图片,处理成功后:

echo '<script language="javascript">window.parent.addPic("'.$webPath.'","'.$imgid.'");</script>';

就这两步就ok了,根据实际需求,你如果要同时上传多张还是建议用第三方的,但是如果没必要的话,还是越简单越好,没有必要引那么臃肿的代码进入你的项目。


转载时请以 超链接的形式 注明:转自Ferman

                  

About me