iframe实现Ajax文件上传效果

原创 2013年12月04日 13:21:27
avascript部分
<!doctype html>

<html>
<head>
<meta charset=utf-8>

<head>
<title>ajax 文件上传~~</title>
</head>

<script>

window.onload=function(){

    var form=document.getElementsByTagName('form')[0];
    form.onsubmit=function(){

        var iframe=document.createElement('iframe');
        iframe.src='do_upload.php';

        var iframe_name="iframe"+Math.random();
        iframe.name=iframe_name;
        document.body.appendChild(iframe);
        iframe.style.width='0px';
        iframe.style.height='0px';        
        iframe.frameBorder='0';
        form.target=iframe_name;
    
        
    }
}
</script>

<body>

<form enctype='multipart/form-data' method='post' action='do_upload.php'>
请选择文件:<input type='file' name='myFile'/><br/>
<input type='submit'/>
<div id='msg'></div>

</form>

</body>

</html>

//php接收部分
<?php

$up_file=$_FILES['myFile'];

if($up_file['error']===0){

    if(!file_exists('./imgs')){
    
        mkdir('./imgs');
    }

    $save_name=rand().$up_file['name'];
    $bool=move_uploaded_file($up_file['tmp_name'],"./imgs/$save_name");

    if($bool){
        $msg='上传成功!';
    }else{
        $msg='上传失败!';
    }
}

echo 
"<script>

var msg=parent.document.getElementById('msg');

msg.innerHTML='<font color=red>$msg</forn>';

</script>";




?>


相关文章推荐

ajax--iframe模拟ajax文件上传效果

js无权读取本地的文件,so不能上传文件但是 有这几种方法 1 iframe伪装 jquery-uploaded-file 2 swf插件  (这个不讲,是一个单独的软件 3 html5 ...

两种文件上传的实现-Ajax上传和form+iframe

前言 http://luckykun.com/work/2016-08-16/file-upload.html 话说现在很多很多项目需要用到文件上传,自从有了HTML5之后,上传就变的超级...

文件上传 通过隐藏iframe的方式来实现ajax上传文件并返回处理结果 ie乱码问题解决

1:生成隐藏iframe用来接收上传文件时的返回值 /**文件上传*/ $("#upload_btn_id").click(function(){ var form = $("#upload_...

Ajax基于iframe文件上传

关于Ajax的文件上传我在网上查找了一些方法,一种方法用的是使用javascript读取客户端的文件内容并将其封装在HTTP的协议中,然后再上传给服务器,但我认为这样的做法对于用户来说是不安全的。于是...

利用隐藏iframe处理文件上传,本页不刷新,仿ajax

简述: 经常遇到文件上传的一些前端功能,例如:会员头像编辑,身份证等证件的上传等等; 而这时需要在当前页面完成整个上传过程,不刷新不跳转,就可以用到这个原理。 在页面中嵌入一个隐藏的iframe...

利用jquery&iframe标签实现页面无跳转的表单文件上传

iframe form提交

iframe实现局部刷新和回调-- 文件上传

今天做项目遇到一个问题。就是提交表单的时候,验证用户名是否存在和验证码是否正确。 当验证码或者用户名存在的时候。在后台弹窗提示。可页面原本file里面符合要求的值刷新没了。用户体验不好。因为用i...
  • ybhjx
  • ybhjx
  • 2015年12月23日 15:14
  • 1536

通过iframe实现ajax方式上传文件

今天在做文件上传的时候,后台kongzhic

ajax实现的文件上传

  • 2008年11月06日 13:14
  • 114KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iframe实现Ajax文件上传效果
举报原因:
原因补充:

(最多只允许输入30个字)