<!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>";

?>

iframe实现Ajax文件上传效果示例的更多相关文章

  1. iframe和ajax文件上传方法

    为什么使用这两种方法文件上传呢,主要是因为局部刷新问题 上传问题,主要是使用form表单,或者用请求一个文件上传 iframe 大多网站都是有一个整体的固定结构,然后进行局部刷新,我们可以使用AJAX ...

  2. iframe 模拟ajax文件上传and formdata ajax 文件上传

    对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe  的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...

  3. form+iframe实现ajax文件上传

    在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成ajax上传的方式,由于没有选择用插件,所以用form+iframe的方式,并且这种方式对IE8以上及主 ...

  4. AJAX-----11iframe模拟ajax文件上传效果原理3

    如果直接给用户提示上传成功,那么如果用户上传的文件比较大点,那么等上半天都没反映,那么用户很有可能会刷新或者关了从来等... 那么会给我们服务器带来一定的影响,所以我们可以对这方面的用户体验度进行提升 ...

  5. 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...

  6. [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件   This project attempts to ach ...

  7. AJAX-----10iframe模拟ajax文件上传效果原理2

    在实际开发中其实我们可以给用户一些提示,比如上传成功或者上传失败,废话不多说,走码: <!DOCTYPE html> <html lang="en"> &l ...

  8. AJAX-----09iframe模拟ajax文件上传效果原理1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

随机推荐

  1. VeeValidate配置中文的两种方法

    使用VeeValidate时遇到的问题,下面是我找到的一些解决办法: VeeValidate一直报错早不到addlocale方法 解决办法:1.卸载掉当前版本,重新安装低版本如2.0.0-rc.25  ...

  2. poj2299树状数组入门，求逆序对

    今天入门了树状数组 习题链接 https://blog.csdn.net/liuqiyao_01/article/details/26963913 离散化数据:用一个数组来记录每个值在数列中的排名,不 ...

  3. 性能测试十二：jmeter进阶之java请求参数化

    如项目中的ip.端口号之类的,都可以在此代码中定义 public Arguments getDefaultParameters() { // TODO Auto-generated method st ...

  4. vue组件库（二）：基于verdaccio工具npm私服搭建

    大纲 搭建npm私服的必要性 搭建npm私服的主要操作 一.搭建npm私服的必要性 二.搭建npm私服的主要操作 1.环境准备 确保服务器已安装以下包: node(必须) 安装了nodenpm,如果想 ...

  5. 数据库中的null用法

  6. jenkins X实践系列（2） —— 基于jx的DevOps实践

    jx是云原生CICD,devops的一个最佳实践之一,目前在快速的发展成熟中.最近调研了JX,这里为第2篇,使用已经安装好的jx来实践CICD,旨在让大家了解基于jx的DevOps是如何运转的,感兴趣 ...

  7. python错误、调试、测试

    1.错误, Python内置的try...except...finally用来处理错误十分方便.出错时,会分析错误信息并定位错误发生的代码位置才是最关键的. 程序也可以主动抛出错误,让调用者来处理相应 ...

  8. Codeforces Round #310 (Div. 2)

    Problem A: 题目大意:给你一个由0,1组成的字符串,如果有相邻的0和1要消去,问你最后还剩几个字符. 写的时候不想看题意直接看样例,结果我以为是1在前0在后才行,交上去错了..后来仔细 看了 ...

  9. Codeforces Round #441(Div.2) F - High Cry

    F - High Cry 题目大意:给你n个数,让你找区间里面所有数或 起来大于区间里面最大数的区间个数. 思路:反向思维,找出不符合的区间然后用总数减去.我们找出每个数掌控的最左端 和最右端,一个数 ...

  10. 048 hive运行的相关配置

    一:执行SQL的方式 1.配置的键值 2.minimal下运行fetch 3.设定hive.fetch.task.conversion=more 4.在more下运行fetch 二:虚拟列 一共三个虚 ...