<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/json2.js"></script>

</head>

<body>

    <p>
　　　　<!--必须这个写-->

      <label for="fileField">File:</label>

      <input type="file" name="fileField" id="fileField">

    </p>

    <p>

      <input type="button" value="Save Data" style="width:80" onclick="testSaveData()">

</p>

    <div style="width:600;background-color:#FCC389;height:200;overflow-x:hidden;overflow-y:scroll" id="showArea">

    </div>

</body>

<script>

function testGetUserInfo()

{

    $.ajax({

        url : '/apps/ctrlPage/getUser?code=1',

        type:"get",

        error : function(error){alert("系统错误.")},

        success : function(result) {

            if (result) {

                $("#showArea").html(JSON.stringify(result));

            }

        }

    });

}

function testGetCheckResult()

{

    $.ajax({

        url : '/apps/ctrlPage/getResult?ckUserId=1',

        type:"get",

        error : function(error){alert("系统错误.")},

        success : function(result) {

            if (result) {

                $("#showArea").html(JSON.stringify(result));

                alert(result.params.checkResult.cataract);

            }

        }

    });

}

function testSaveData()

{

    var formData = new FormData();

    formData.append("ckUserId",1);
　　// 不要忘记加[0]

    formData.append("photo",$("#photoFile")[0].files[0]);

    formData.append("eyePositionRecheck","[{name:\"映光\",result:\"<检查结果>\"},{name:\"交替遮盖\",result:\"<检查结果>\"},{name:\"三棱镜遮盖\",result:{near:\"<近距结果>\",far:\"<远距结果>\"}}]");

    formData.append("refractiveRecheck","{od:{ball:'球径',column:'柱径'},os:{ball:'球径',column:'柱径'}}");

    formData.append("conclusion",'结论');

    $.ajax({

        url : '/apps/ctrlPage/saveData',

        type : 'POST',

        data : formData,

        // 告诉jQuery不要去处理发送的数据

        processData : false,

        // 告诉jQuery不要去设置Content-Type请求头

        contentType : false,

        error : function(error){alert("系统错误.")},

        success : function(result) {

            if (result) {

                $("#showArea").html(JSON.stringify(result));

            }

        }

    });

}

</script>

</html>

FormData 上传多种格式的文件的更多相关文章

  1. Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  2. 使用FormData上传文件、图片

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...

  3. SharePoint 2013上传AI格式文件，再次下载后变成了PS格式文件

    问题: SharePoint 2013上传AI格式文件,再次下载后变成了PS格式文件 需要下载副本才能显示AI格式 解决办法有两个: 第一种,在客户端机器1. Click Start, click R ...

  4. 文件上传二：FormData上传

    介绍三种上传方式: 文件上传一:伪刷新上传 文件上传二:FormData上传 文件上传三:base64编码上传 Flash的方式也玩过,现在不推荐用了. 真正的异步上传,FormData的更多操作,请 ...

  5. （十）HttpClient以multipart/form-data上传文件

    原文链接:https://blog.csdn.net/wsdtq123/article/details/78888734 POST上传文件 最早的HTTP POST是不支持文件上传的,给编程开发带来很 ...

  6. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  7. php学习笔记：文件的上传（包含设置文件的上传大小限制）

    今天写的是文件上传,前几天自学的正规则又忘记了,用了很笨的方法去判断格式,直接上代码: <?php /** * Created by PhpStorm. * User: Administrato ...

  8. MVC下form表单一次上传多种类型的图片（每种类型的图片可以上传多张）

    form表单一次上传多种类型的图片(每种类型的图片可以上传多张) controller中的action方法 public ActionResult UploadImage( )        { in ...

  9. HTTP文件上传服务器-支持超大文件HTTP断点续传的实现办法

    最近由于笔者所在的研发集团产品需要,需要支持高性能的大文件http上传,并且要求支持http断点续传.笔者在以前的博客如何实现支持大文件的高性能HTTP文件上传服务器已经介绍了实现大文件上传的一些基本 ...

随机推荐

  1. UITableView移除某行的分割线和让分割线宽度为cell的宽度

    1.移除 UITableView 某一行的分割线 所谓移除,其实就是使其偏移出 cell 的显示范围,看不到即移除. 方法1: 移除系统的分割线,自己定义每行的分割线 self.tableView.s ...

  2. 175. Combine Two Tables【LeetCode】-LEFT JON 和RIGHT JOIN，两张表关联查询-java -sql入门

    Table: Person +-------------+---------+ | Column Name | Type | +-------------+---------+ | PersonId ...

  3. InnoDB: ERROR: the age of the last checkpoint

    --InnoDB: ERROR: the age of the last checkpoint ---------------------------------------------------- ...

  4. MySQL数据库 —子查询,联合查询

    一 使用IN关键字的子查询 1.查询游戏类型是'棋牌类' 的游戏的分数信息 游戏分数表中并未包含游戏类型信息 思路一:采用链接查询 思路二: 分两步进行,首先找到所以'棋牌类'游戏的编号,再以这一组编 ...

  5. ubuntu操作系统以及开发环境的安装

    网盘视频:里面包含了centos,ubuntu,Solaris 三种目前比较主流的操作系统的安装,以及他们的开发环境的安装 https://pan.baidu.com/disk/home#list/v ...

  6. PYTHON：新闻聚合

    这个项目看了有段时间,因为一直没跑通,而且关于NNTP也不是特别理解.这里是转载code123的分析. 原文地址:http://www.code123.cc/1327.html 书中的第四个练习,新闻 ...

  7. Elastic Stack

    Elastic Stack 开发人员不能登陆线上服务器查看详细日志 各个系统都有日志,日志数据分散难以查找 日志数据量大,查询速度慢,或者数据不够实时 官网地址:https://www.elastic ...

  8. canvas标签的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Node.js之断言处理

    Node.js之断言处理 在Node.js中,可以利用assert模块进行断言处理,如果判断错误,则抛出AssertError异常 1 equal方法与notEqual方法 equal方法用于判断两个 ...

  10. nGrinder 简易使用教程

    背景 性能压测工具之前使用的是jmeter,这次说的是nGrinder,先直接搬运两者之间的比较 比较点 JMeter nGrinder 结果 实现语言 Java Java = License Apa ...