<!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. Memcached-1.4.4启动参数——手动设置chunk大小的上限

    最近在看memcached的源代码,源码包是memcached-1.4.22,一开始看memcached.c的main函数的时候发现了和1.2.8的不同之处. 可能在1.4.22版本之前就已经添加了这 ...

  2. 图解JSP与Servlet的关系

      Servlet是Java提供的用于开发Web服务器应用程序的一个组件,运行在服务器端,由Servlet容器所管理,用于生成动态的内容.Servlet是平台独立的Java类,编写一个Servlet, ...

  3. LVS+PIRANHA测试

    有一个知识盲点,是这个VIP,在四个服务器上都要设置? 现在只测试了两个机器,REAL SERVER没有开动. 如果LVS和REALSERVER都可以停一个作互切的话,那KEEPALIVED要它他什么 ...

  4. PBOC规范研究

    一.ISO14443协议和PBOC关于CID的约定 看过协议的人其实都明白,RATS命令中参数字节的低半字节是CID,期中,CID不能为15. ISO14443协议中要求当RATS命令的CID等于0时 ...

  5. UVAlive3211 Now or later（2-SAT）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33799 [思路] 2-SAT. 二分安全间隔x,先到为1后到为0, ...

  6. Tomcat内存溢出详解【转载】

    本文转载自 http://elf8848.iteye.com/blog/378805 Java内存溢出详解 一.常见的Java内存溢出有以下三种: 1. java.lang.OutOfMemoryEr ...

  7. Java多线程编程（二）

    在 Java多线程编程(一) 中的多线程并没有返回值,本文将介绍带返回值的多线程. 要想有返回值,则需要实现新的接口Callable而不再是Runnable接口,实现的方法也改为call()方法,执行 ...

  8. 对MFC 框架的认识

    1.MFC 的概念 微软基础类库(英语:Microsoft Foundation Classes,简称MFC)是一个微软公司提供的类库(class libraries),以C++类的形式封装了Wind ...

  9. jQuery Ajax 的 load()方式

     load() 方法 load() 是所有jQuery工具中最简单的,向它传入一个URL,它会异步加载URL内的内容,然后将内容插入每一个选中元素中,替换掉已经存在的任何内容. 例如 $(" ...

  10. 集群中几种session同步解决方案的比较

    1. 客户端cookie加密 .比较好的方法是自己采用cookie机制来实现一个session,在应用中使用此session实现. 问题:session中数据不能太多,最好只有个用户id. Sessi ...