如果直接给用户提示上传成功，那么如果用户上传的文件比较大点，那么等上半天都没反映，那么用户很有可能会刷新或者关了从来等。。。

那么会给我们服务器带来一定的影响，所以我们可以对这方面的用户体验度进行提升，比如做类似我们经常可以见到的进度条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jq183.js"></script>

    <script>

        function ajaxup(){

            var ifname = 'up'+Math.random();

            $("<iframe name='"+ ifname +"' height='0' width='0' frameborder='0' ></iframe>").appendTo($('body'));

            $('form:first').attr('target',ifname);

            /*添加一个上传中的标识*/

            $('#jindu').html('<img width="20" height="20" src="./up.gif">');

            //return false;

        }

    </script>

</head>

<body>

    <p id="mess"></p>

    <p id="jindu"></p>

    <form action="9.php" method="post" enctype="multipart/form-data" onsubmit="return ajaxup();">

        <input type="file" name="pic"> <br> <br>

        <input type="submit" value="GO">

    </form>

    <iframe src="" frameborder="0"></iframe>

</body>

</html>

<?php

    //模拟一个比较大的文件正在上传中

    sleep(3);

    if(empty($_FILES)){

        exit('No file');

    }

    $errs = $_FILES['pic']['error'] == 0 ? 'success':'error';

    echo "<script> parent.document.getElementById('mess').innerHTML = '$errs' </script>";

    //上传成功后关闭掉他

    echo "<script> parent.document.getElementById('jindu').style.display = 'none' </script>";

效果如下所示：

AJAX-----11iframe模拟ajax文件上传效果原理3的更多相关文章

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

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

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

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

  3. ajax方式提交带文件上传的表单,上传后不跳转

    ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...

  4. Java文件上传下载原理

    文件上传下载原理 在TCP/IP中,最早出现的文件上传机制是FTP.它是将文件由客户端发送到服务器的标准机制. 但是在jsp编程中不能使用FTP方法来上传文件,这是由jsp运行机制所决定的 文件上传原 ...

  5. iframe实现Ajax文件上传效果示例

    <!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...

  6. MVC5：使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...

  7. AJAX 表单提交 文件上传

    1. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载 ...

  8. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  9. Django Ajax学习二之文件上传

    基于Django实现文件上传 1. url路由配置 路径:C:\Users\supery\Desktop\day82\demo_ajax\demo_ajax\urls.py from django.c ...

随机推荐

  1. 基于S5PC100裸机程序之SPI(上)

    作者:杨老师,华清远见嵌入式学院讲师. SPI作为应用最为广泛的通信总线协议之一,开发人员应当掌握,本章将介绍SPI总线协议的基本理论,以及S5PC100的SPI总线控制器的操作方法. 1. SPI总 ...

  2. Nginx_HTTP 499 状态码 nginx下 499错误

    日志记录中HTTP状态码出现499错误有多种情况,我遇到的一种情况是nginx反代到一个永远打不开的后端,就这样了,日志状态记录是499.发送字节数是0. 老是有用户反映网站系统时好时坏,因为线上的产 ...

  3. 20145330《Java程序设计》第四周学习总结

    20145330<Java程序设计>第四周学习总结 一周两章新知识的自学与理解真的是很考验和锻炼我们,也对前面几章我们的学习进行了检测,遇到忘记和不懂的知识就再复习前面的,如此巩固也让我对 ...

  4. memcache 缓存失效问题(转)

    在大并发的场合,当cache失效时,大量并发同时取不到cache,会同一瞬间去访问db并回设cache,可能会给系统带来潜在的超负荷风险. 解决方法 方法一 在load db之前先add一个mutex ...

  5. java 深入浅出工厂模式

    一.引子 话说十年前,有一个暴发户,他家有三辆汽车——Benz奔驰.Bmw宝马.Audi奥迪,还雇了司机为他开车.不过,暴发户坐车时总是怪怪的:上Benz车后跟司机说“开奔驰车!”,坐上Bmw后他说“ ...

  6. Centos 下安装 文泉驿 字体 Odoo

    刚装完centos下的odoo的字体 文泉驿 ,一万头草泥马呼啸而过.....劝君如非必要,千万别再centos下折腾odoo..... 正题,文泉驿官网 只提供 deb包和源码包的字体安装 ,想在c ...

  7. 重命名PDF打印文件名

    Odoo系统默认打印出来的PDF文件都是以当前文档模型对象对应的模板文件名命名的,对用户来说,这样的命名很不友好. 我们希望能够将打印出来的文件名以单号命名,下面是实现这种目的的方法. 在report ...

  8. SQL Server 中字符串中包含字符串变量的表示方法

    在代码中有如下的需求:需要在数据库中使用 in 关键字做删除的时候,又需要使用到参数化,参数又是字符串,所以使用的时候就按照如下方式 StringBuilder sql = new StringBui ...

  9. centos6 系统优化脚本

    #!/bin/bash # 检查是否为root用户,脚本必须在root权限下运行 # if [[ "$(whoami)" != "root" ]]; then ...

  10. gcc和g++

    一.GCC GNU编译器套件(GNU Compiler Collection)包括C.C++.Objective-C.Fortran.Java.Ada和Go语言的前端,也包括了这些语言的库(如libs ...