整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
小白！还记得之前我们说过的jQuery中的ajax异步加载数据的方法么？”
“记得，之前的代码我这里还有，你看看是不是这个？”
老朱：“恩，没错，通过ajax向图片上传的页面把昨天获取到的图片base64编码发送过去，php页面就可以把图片存储到服务器上。”
小白：“可是我不会php啊！这怎么办？”
老朱：“没关系，你不用了解php是怎么把图片存到服务器上的，只需要知道把图片发送给图片上传的php页面->处理返回结果就可以了。为了更好的了解这个功能你可以看一下这个php页面的结构。”
“通过$base64_image_content获取发送过来的图片base64编码信息，然后把图片存到服务器上，如果存储成功则成功标识sucess为1并返回图片地址imgurl，存储失败的话就把success设置为0。”
老朱接着说道：“现在我们与图片上传的页面进行ajax通信试试。这个页面跟当前图片上传的html页面是同级目录，所以url里面直接使用php页面名称（upload.php）就可以了。”
“注意data里面发送的变量参数名称myimg要跟php页面里面POST中的名称一致，fr.result就是我们昨天拿到的图片base64编码。现在我们执行以下页面看看能不能上传图片。”
“返回的json数据中success值为1说明图片已经上传到服务器上了。”
小白：“假如我把之前我们做的提示信息控件引入，通过返回的success信息就可以提示用户图片上传是否成功了吧！稍等我在这个基础上改改。”
老朱：“恩，做的不错，图片上传成功以后返回的success状态和图片地址非常重要，由于图片上传是一个异步过程，因此等图片上传完成以后我们需要根据success状态和图片地址做后续的操作。”
“图片上传的整个流程我们现在已经都准备好了，通过canvas对图片做压缩后上传图片只需要在现在这个基础上增加canvas处理就可以了，这块我们明天接着讨论，你今天先把图片上传的整个流程再熟悉一下吧。”
异步加载（小白html5成长之路26）、提示信息控件（小白html5成长之路35）、图片上传（小白html5成长之路48、49与本节连续）。本节js完整代码如下：
想学H5的朋友可以关注老炉，您的关注是我持续更新《小白HTML5成长之路》的动力！
ormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。
在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。
但上传文件部分只有底层的XMLHttpRequest对象发送上传请求，那么怎么通过jQuery的Ajax上传呢？本文将介绍通过jQuery使用FormData对象上传文件。
HTML代码
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
javascript代码
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {}).fail(function(res) {});
这里要注意几点：
上传后，服务器端代码需要使用从查询参数名为file获取文件输入流对象，因为<input>中声明的是name="file"。
如果不是用<form>表单构造FormData对象又该怎么做呢？
使用FormData对象添加字段方式上传文件
HTML代码
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button></div>
这里没有<form>标签，也没有enctype="multipart/form-data"属性。
javascript代码
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {}).fail(function(res) {});
这里有几处不一样：
从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件，只需要在<input type="file">里添加multiple或multiple="multiple"属性。
端页面：html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="./uploadfile.css" rel="stylesheet">
<script src="./jquery.min.js"></script>
<script src="./jquery.uploadfile.min.js"></script>
</head>
<body>
<img class="imgPreview" width="80px" height="80px" style="display: none"/>
<div id="mulitplefileuploader">上传</div>
<div id="status"></div>
<script>
$(document).ready(function (){
var settings = {
url: "upload.php",
dragDrop: true,
fileName: "myfile",
allowedTypes: "jpg,png,gif,doc,pdf,zip",
returnType: "json",
onSuccess: function (files, data, xhr){
$('.imgPreview').show();
$('.imgPreview').attr('src','uploads/'+data);
}
*请认真填写需求信息，我们会在24小时内与您取得联系。
