<!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=""/>';}

            }

        }

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

         //使用formData不用设置表头

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

          xhr.send(fmdata);

        return false;

    }

}

</script>

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

文件<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+FormData+javascript 实现无刷新上传附件的更多相关文章

  1. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

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

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  4. 文件上传---form表单，ajax,jquery,以及iframe无刷新上传 （processData，contentType讲解）

    服务端程序: import tornado.web import os IMG_LIST=[] class IndexHandler(tornado.web.RequestHandler): def ...

  5. ajax实现无刷新上传附件并且显示进度条的实例

    首先:得把php.ini中的post_max_size和upload_max_filesize改成200M或更大(进度条好看效果,默认是2M) html和js代码: <!DOCTYPE html ...

  6. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  7. ajax 无刷新上传

    最近要做微信的图文上传,因为一个图文了表中可以有多个图文,所有按钮需要随时添加,所以做了一种无刷新上传的方法. 首先我们要在html页面中写上这样的几段代码 javascript: $(functio ...

  8. ajax ＋jsp＋iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  9. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

随机推荐

  1. d037: 鸡兔同笼

    内容: 鸡兔同笼中头的总数,脚的总数,求鸡兔各多少只 输入说明: 一行两个整数分别表示头.脚总数(保证有解,当然有可能解为0) 输出说明: 一行两个整数,分别表示鸡.兔的只数 输入样例:   20 4 ...

  2. android 休眠唤醒机制分析(二) — early_suspend

    本文转自:http://blog.csdn.net/g_salamander/article/details/7982170 early_suspend是Android休眠流程的第一阶段即浅度休眠,不 ...

  3. SANS top 20

    What Are the Controls?The detailed Consensus Audit Guidelines are posted at http://www.sans.org/cag/ ...

  4. 哎，就硬盘还不是最掉价的，1999的自配主机，VIRTUALBOX里虚拟机，聊以自慰吧。

    安装时注意的问题,要是不测试MYSQL,则CONFIGURE参数和DISABLE-MYSQL,在编译时有提示的. 然后就是LIBTOOL包过老的问题,以及未安装LIBTOOL包的问题. 最后,是运行命 ...

  5. 文档整体解决方案(readthedocs、github 、sphinx)使用

    这里是总结了一下,用的工具或者平台:readthedocs.github .sphinx. 使用这三个工具即可轻松创建高效的文档管理库,可以用来翻译,水平再高一点可以写书. readthedocs 文 ...

  6. poj1797 - Heavy Transportation(最大边,最短路变形spfa)

    题目大意: 给你以T, 代表T组测试数据,一个n代表有n个点, 一个m代表有m条边, 每条边有三个参数,a,b,c表示从a到b的这条路上最大的承受重量是c, 让你找出一条线路,要求出在这条线路上的最小 ...

  7. [Java Concurrent] 多线程合作 wait / notifyAll 的简单案例

    本案例描述的是,给一辆汽车打蜡.抛光的场景. Car 是一辆被打蜡抛光的汽车,扮演共享资源的角色. WaxOnCommand 负责给汽车打蜡,打蜡时需要独占整部车,一次打一部分蜡,等待抛光,然后再打一 ...

  8. CSAPP:cachelab（1）

    本项目大体上就是要求用C\C++来模拟cpu对cache的访问,然后统计hits.misses和eviction的次数.其实并没有想象中的那么难,感觉完全可以当成一道acm里面的大模拟题..下面就对这 ...

  9. STK 10.1.3

    2692407267@qq.com.很多其它内容请关注http://user.qzone.qq.com/2692407267 STK 10.1.3与Qualnet联合仿真的demo

  10. [Javascript] Intro to Recursion - Refactoring to a Pure Function

    Previous post: http://www.cnblogs.com/Answer1215/p/4990418.html let input, config, tasks; input = [' ...