<!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. sqlserver 进行MD5加密

    官方定义函数: HashBytes ( '<algorithm>', { @input | 'input' } )  <algorithm>::= MD2 | MD4 | MD ...

  2. 清橙A1484

    http://www.tsinsen.com/ViewGProblem.page?gpid=A1484### 题解: 在线插入并不好做,我们将所有操作离线,变为删除操作. 每次询问的时候对于当前B串所 ...

  3. 3D touch 的 应用 --备用

    在iPhone 6s和iPhone 6s Plus中Apple引入了3D Touch技术.3D Touch的触控技术,被苹果称为新一代多点触控技术.其实,就是此前在Apple Watch上采用的For ...

  4. 直接引用windows命名空间

    再逛博客的时候,看见一段这样代码.获取系统密码的 static void DumpCredentials(Windows.Security.Credentials.PasswordCredential ...

  5. 创建组合索引SQL从1个多小时到1S的案例

    select aa.acct_org, aa.loan_acct_no, aa.FUNCTIONARY, aa.cust_no, sum(dwm.pkg_tools.currcdtran(bb.INT ...

  6. COALESCE函数

    --SQL学习笔记一 --函数coalesce --功能返回参数中第一个非NULL值 --语法 COALESCE ( expression [ ,n ] ) --创建测试表 IF OBJECT_ID( ...

  7. Delphi中文本文件的操作

    Delphi中文本文件的操作 相关知识内容: 在对文本文件进行任何处理之前,首先要打开此文本文件.声明变量:通过此变量可以来引用一个文本文件. 打开一个文件需要两步:首先是 AssignFile(), ...

  8. adb Monkey用法

    以这条Monkey指令为例: #monkey -s --throttle -p com.android.cameraswitch -- 这条monkey指令是测试:在camera模块中产生1万次伪随机 ...

  9. C#日历上显示节气、阴阳历节假日信息

    近期在做一个工作日历,想在日历上设置工作日,显示请假.加班等相关信息,显示农历日期信息(包括农历日期.节日 .节气).公历信息(节假期). 不能不说,http://www.cnblogs.com/ho ...

  10. SheetOffice控件使用分享

    1.  控件属性及说明 Template:套用的模板目录(套用模板会使用到) 模板中必须包含书签: Body,这个是在代码中写死了的,是把当前文档的内容插入到模板的Body书签中. 如果使用印章,必须 ...