<!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. 详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在）

    Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起. CommonsChunkPlugin 能解决的问题 在使用插件前,考虑几个问题: 对哪些 c ...

  2. hdu1890 splay维护区间翻转

    这题的建模有点不太一样,是按结点横坐标赋予键值的 同时每次rotate和splay时都要注意下往上往下更新 /* 先建立好splay tree,将结点按num/输入顺序排序,遍历时每次将当前结点提到根 ...

  3. Asp.NetWebForm的控件属性

    一:GridView: 1.绑定ID 的值:DataKeyNames="Id", 2.自动产生列的意思:AutoGenerateColumns 3.如何注册脚本:ClientScr ...

  4. Python Mysql_db对数据查询进行处理

    引用自:https://www.cnblogs.com/itdyb/p/5700614.html 一.脚本如下 #!/usr/bin/python2.7# coding=utf-8import tim ...

  5. Java中的Lambda表达式

    Lambda来源于希腊字母入,发音为  /'læmdə/对高数有所了解的人都知道λ用于声明一个数学逻辑系统,表示根据XX的输入参数,会返回某个Y结果.这正是编程语言中函数(方法)的意思.因此Lambd ...

  6. [OpenCV-Python] OpenCV 核心操作 部分 III

    部分 III核心操作 OpenCV-Python 中文教程(搬运)目录 9 图像的基础操作 目标 • 获取像素值并修改 • 获取图像的属性(信息) • 图像的 ROI() • 图像通道的拆分及合并几乎 ...

  7. DP-hdu1176

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1176 这道题与动态规划中的数塔问题十分类似,因此如果对于数塔问题还不太明白的,可以先参考一下博客: 数 ...

  8. 化学1（chem1）- 化学合成

    P2784 化学1(chem1)- 化学合成 还是spfa,距离数组初始化为-1,松弛操作改为*就好了,一开始老是超时,后来加了一个visit数组就过了,这个重复造成的效率浪费还是蛮大的,以后都要加. ...

  9. Python常用模块--datetime

    datetime是Python专门用于处理日期和时间的标准模块. 1.获取当前的本地时间 #!/usr/bin/env python# -*- coding:utf-8 -*-__author__ = ...

  10. String 方法indexOf()

    indexOf()来测是否包含子字符串. indexOf(sub, start) 如果return 是-1 包含没有找到字段.