<!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. 外卖的撕‘哔’大战 CSU 1559

                                                      CSU 1559 Time Limit:1000MS     Memory Limit:131072 ...

  2. History Grading

    uva111:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=24& ...

  3. SCALA常规练习A

    package com.hengheng.scala import scala.util.control.Breaks._ import scala.util.Random object Applic ...

  4. 手工走一次OPENSTACK安装，掉一层皮啊

    掉皮也是值得的,对OS的了解慢慢加深. 最近加入CS的Q群也学到不少.

  5. [Android] 混音器AudioMixer

    AudioMixer是Android的混音器,通过混音器可以把各个音轨的音频数据混合在一起,然后输出到音频设备. 创建AudioMixer AudioMixer在MixerThread的构造函数内创建 ...

  6. Linux定时运行与开机运行任务

    http://os.51cto.com/art/200805/75144.htm at命令与crontab命令 http://os.51cto.com/art/201007/211874.htm ht ...

  7. Table Lookup

    做OJ的时候,做过类似的,即hash.算法很简单,关键是书上写的和做OJ,是完全不同的风格.有很多值得学习的地方. /* * Table Lookup * 详见<<C程序设计语言>& ...

  8. BZOJ1511: [POI2006]OKR-Periods of Words

    1511: [POI2006]OKR-Periods of Words Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 174  Solved: 92[Su ...

  9. android sudio 记录

    1. KVM is not installed on this machine (/dev/kvm is missing) 原文网址:http://askubuntu.com/questions/56 ...

  10. 中国四大资产管理公司 ACM

    一,来历和主要业务 国家于1999年成立了四家直属国务院的资产管理公司:中国东方资产管理公司.中国信达资产管理公司.中国华融资产管理公司.中国长城资产管理公司.由于资产公司一般是是为适应体制转轨或防范 ...