<!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. 习题二：string数组应用

    说明: 读字符串char buf[100]="xxx:yyy:zzz:aaa:bbb" 按“:”进行分解到string数组中去 逻辑: 通过指针遍历整个字符串 遇到'\0'表示字符 ...

  2. spinner 下拉框控件

    spinnerMode=dropdown时,为下拉模式spinnerMode=dialog时,会在界面中间弹出Android:popupBackground=”#f0000000”,可以去除spinn ...

  3. svn ， github工作流

    svn 需要有一台中央服务器,所有的分支,主干,标签,全都保存在这台中央服务器上.开发着需要提交代码时,需要保持中央服务器连接.切换分支时会有本地与服务器网络连接. git 改进了这一点,每台安装有g ...

  4. 转：Netty系列之Netty高性能之道

    1. 背景 1.1. 惊人的性能数据 最近一个圈内朋友通过私信告诉我,通过使用Netty4 + Thrift压缩二进制编解码技术,他们实现了10W TPS(1K的复杂POJO对象)的跨节点远程服务调用 ...

  5. How Many Points of Intersection?

    uva10790:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_prob ...

  6. java浮点类型计算

    java浮点类型需要采用java.math.*这个工具包,这样的计算结果才是我们想要的.呵呵 import java.math.BigDecimal; import java.text.NumberF ...

  7. POJ Stockbroker Grapevine 1125 多源最短路（Floyd）

    题目大意: 股票经纪人要散播股票的谣言,每个人都有人际关系,每个人只信任他相信的人传播的谣言, 其实也就是有向图.问 哪个人能最快的将谣言传播给所有人,并且求出传过去的最短时间. 题目分析: 我们用F ...

  8. 帕累托分析法(Pareto Analysis)(柏拉图分析)

    帕累托分析法(Pareto Analysis)(柏拉图分析) ABC分类法是由意大利经济学家帕雷托首创的.1879年,帕累托研究个人收入的分布状态图是地,发现少数人收入占全部人口收入的大部分,而多数人 ...

  9. STL_iterator迭代器(2)——几种迭代器对象的用法

    要学会使用迭代器和容器以及算法,需要学习下面的新技术. 一.流和迭代器 本书的很多例子程序使用I/O流语句来读写数据.例如: int value; cout << "Enter ...

  10. selenium webdriver python 元素操作

    常用操作 click 点击某个元素 driver.find_element_by_id(“su”).click()   clear driver.find_element_by_id(“kw”).cl ...