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

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

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

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

效果如下所示:

时间: 2024-10-12 19:20:18

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

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

<!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.

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

在实际开发中其实我们可以给用户一些提示,比如上传成功或者上传失败,废话不多说,走码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jq183.js"></script> <script>

Ajax带进度条文件上传

Ajax带进度条文件上传 html文件代码: <html> <head> <title>FormData</title> <script type="text/javascript"> /*进度条需要两个最基础的信息------总大小,已上传大小 解决:在html5中有一个上传过程事件,在事件中可以读取这两个信息 ---- onprogress 具体思路: 在上传过程中,不断的触发函数,函数读取已上传/总大小 不断的更新页面的

关于Java网络爬虫---模拟txt文件上传操作。

业务需求是这样的,公司400业务中客户使用的,400电话号码,可以添加多个目的码你可以理解为转接号码: 这些配置的目的码我们会在网关服务器上配置成白名单,既拥有某些权限.先提出的要求是先添加或者变动目的码要及时同步到网关. 场景: 1.我们的网关服务器接受的白名单(目的码)是已txt文件上传的,数据按照制定的格式保存在txt里面. 2.利用Java网络爬虫模拟txt文件上传.------2018-4-7现在不写了,代码在公司电脑上明天总结一下在写. 原文地址:https://www.cnblog

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

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

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

一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 1 <form target="hiddenFrame" method="post" enctype="multipart/form-data" action='xx'> 2 <input value=""/> 3 <iframe name="hi

MVC中使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法——File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的“读

MVC5:使用Ajax和HTML5实现文件上传功能

引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功能 高级功能:通过拖拽文件的操作实现多个文件上传功能 背景 HTML5提供了一种标准的访问本地文件的方法--File API规格说明,通过调用File API 能够访问文件信息,也可以利用客户端来验证上传文件的类型和大小是否规范. 该规格说明包含以下几个接口来使用文件: File接口:具有文件的"读

nodejs+ajax实现简单的文件上传功能

app.js中引入express的第三方中间件multer实现文件上传功能. var multer = require('multer');//用express的第三方中间件 multer 实现文件上传功能. app.use(multer({//设置文件上传到的位置 dest: './public/images/upload', rename: function (fieldname, filename) { return filename; } })); 路由 app.post('/uploa