<!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. 如何使用Instruments诊断App（Swift版）：起步-b

    无论你写过许多iOS应用,还是刚刚开始你的第一个应用,毫无疑问,你都会想出一些新点子,或者想去弄明白你该怎么做,来让你的app变得更好. 除去添加新特性来优化你的应用,有一件事是所有好的开发者都回去做 ...

  2. 减少JAVA GC

    减少GC开销的措施:程序的运行会直接影响系统环境的变化,从而影响GC的触发.若不针对GC的特点进行设计和编码,就会出现内存驻留等一系列负面影响.为了避免这些影响,基本的原则就是尽可能地减少垃圾和减少G ...

  3. Node.js 入门(2)

    1.http 请求 //调用Node.js自带的http模块 var http = require("http"); //调用http模块提供的函数createServer htt ...

  4. Html Meta 标签详解

    http://www.dreamdu.com/xhtml/tag_meta/

  5. 001Spark文件分析测试

    使用spark-1.4.1-bin-hadoop2.6进行处理,测试文件大小为3G, 测试结果: 1:统计一个文件中某个字符的个数 scala> sc.textFile("/home/ ...

  6. Json 处理datetime

    json怎么处理datetime类型 http://hi.baidu.com/culion/item/428df54bf36762aede2a9ff1

  7. ISO7816协议的块传输协议

    1.块传输协议中的前三个字节是强制必须有的 NAD节点地址: 当终端支持多个卡槽,终端和这些卡槽以总线的方式通讯时,该字节有用,其他情况下,默认为0 bit1-3:定义了源地址 bit5-7:定义了目 ...

  8. HID燈是什么及其工作原理

    HID為HighIntensityDischarge的縮寫,即高壓氣體放電燈,它發光的原理是將12V電壓增壓至23000V的超高電壓,激穿填充在石英管的氙氣,使它發光.然后再將電壓轉成85V左右,穩定 ...

  9. -_-#【Mac】快捷操作

    快捷键 command + 拖拽 ＝ 剪切option + 拖拽 ＝ 复制command + option + 拖拽 ＝ 快捷方式 command + ］ 前进command + ［ 后退 comma ...

  10. 【转】Android 基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果--不错

    原文网址:http://blog.csdn.net/xiaanming/article/details/10163203 转载请注明出处:http://blog.csdn.net/xiaanming/ ...