<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script type="text/javascript">

window.onload=function()

{

    var fm=document.getElementsByTagName("form")[0];

    fm.onsubmit=function()

    {

    //var username=document.getElementById("username").value;

    // var password=document.getElementById("password").value;

    // var email=document.getElementById("email").value;

    //var fmdata="username="+username+"&password="+password+"&email="+email;

    var fmdata=new FormData(fm);

        var xhr=new XMLHttpRequest();

        xhr.onreadystatechange=function()

        {

            if(xhr.readyState==4)

            {

                eval("var obj="+xhr.responseText);

               document.getElementById("scjg").innerHTML=obj.jg;

               if(obj.name!=null){

               document.getElementById("sctp").innerHTML='<img src=\"'+obj.name+'\" width="89" height="70"  alt=""/>';}

            }

        } 

        //设置监听事件ajax.upload.onprogress

        xhr.upload.onprogress=function(evt){

            //感知附件上传情况，利用事件感知

            //console.log(evt);

            var loaded=evt.loaded;

            var total=evt.total;

            var per=Math.floor((loaded/total)*100)+"%";

            document.getElementById("jdn").style.width=per;

            document.getElementById("jdn").innerHTML=per;

            }

        xhr.open("POST","/1.php");

         //使用formData不用设置表头

         //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

          xhr.send(fmdata);

        return false;

    }

}

</script>

<style>

#jdw{

    margin:10px;

    height:20px;

    border:solid 1px #666;

    width:200px;}

#jdn{height:20px;

background-color:#F00;

width:0px;

}

 </style>

</head>

<body>

<div id="scjg"></div>

<div id="sctp"></div>

ajax+FormData+javascript 实现无刷新表单注册

<form method="post">

姓名<input name="username" type="text" id="username">

<br>

密码<input name="password" type="password" id="password">

<br>

邮箱<input name="email" type="text" id="email">

<br>

<div id="jdw"><div id="jdn"></div></div>

文件<input name="nfile" type="file" id="nfile">

<br>

<input type="submit" value="提交"></form>

</body>

</html>
<?php

//print_r($_POST);

//print_r($_FILES);

$ary=array();

if($_FILES["nfile"]["error"]>0){

$ary['jg']='上传附件有问题，有可能没有附件';

echo json_encode($ary);

exit();

}

$path="./upfile/";

$name=$_FILES["nfile"]['name'];

//附件上传

if(move_uploaded_file($_FILES["nfile"]['tmp_name'],iconv("UTF-8","GBK",$path.$name)))

{

$ary['jg']="上传成功";

$ary['name']=$path.$name;

}else{

$ary['jg']="上传失败";

}

echo json_encode($ary);

?>

ajax上传文件进度条的更多相关文章

  1. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  2. node实现http上传文件进度条 -我们到底能走多远系列（37）

    我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...

  3. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  4. php上传文件进度条

    ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...

  5. 折叠面板实现，上传文件进度条，三级联选择器，多级联选择器， 利用layui实现

    首先贴出html代码 <form class="layui-form" action=""> <div class="layui-f ...

  6. html5异步上传图片显示上传文件进度条

    <html> <head> </head> <body> <p> emo_album_id:<input type="tex ...

  7. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  8. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  9. atitit. 文件上传带进度条 atiUP 设计 java c# php

    atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...

随机推荐

  1. 多目标遗传算法 ------ NSGA-II （部分源码解析）README 算法的部分英文解释

    This is the Readme file for NSGA-II code. About the Algorithm--------------------------------------- ...

  2. 在controller写sql在mapper拼接

    这是在controller里面: String search = ""; if("null".equals(start_time)||"". ...

  3. Scut：通用配置管理器

    1. 配置节 ConfigSection private List<ConfigNode> _configNodes; public class ConfigNode { public C ...

  4. Seek the Name, Seek the Fame

    poj2752:http://poj.org/problem?id=2752 题意:给你一个串,让你求前n个字符和后n个字符相同的n有多少,从小到大输出来. 题解:这一题要深刻理解KMP的next数组 ...

  5. cf C. Counting Kangaroos is Fun

    http://codeforces.com/contest/373/problem/C 贪心,先排序,然后从n/2位置倒着找每一个可不可以放到别的袋鼠内. #include <cstdio> ...

  6. Ubiquitous Religions

    http://poj.org/problem?id=2524 这道题就是并查集. #include<cstdio> #include<cstring> #include< ...

  7. poj 3114 Countries in War

    http://poj.org/problem?id=3114 #include <cstdio> #include <cstring> #include <queue&g ...

  8. gcc编译动态和静态链接库

    我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库两种.静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.动态库在程序编译时并不会被连接到目标代码中,而是 ...

  9. HDU2056(rectangles)

    Rectangles Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  10. 链接器（linker）的作用——CSAPP第7章读书笔记

    首先说说我为什么要去读这一章.这个学期开OS的课,在Morden Operating System上读到和Process有关的内容时看到这样一句话:“Process is fundamentally ...