谈一次ajax上传图片到又拍云案例分享

摘要: 之前图片上传到又拍云直接用的是HTTP FORM API ,今天项目中遇到AJAX上传后图片显示的效果，回过头来想想，跟HTTP FORM API表单提交的过程基本类似，作如下分享，希望有个帮助。

之前图片上传到又拍云直接用的是HTTP FORM API ,今天项目中遇到AJAX上传后图片显示的效果，回过头来想想，跟HTTP FORM API表单提交的过程基本类似，作如下分享，希望有个帮助。

//封装好的公共方法
/**
* 获取上传到upyun所需要的配置参数
*/
function getUpYunConfig ()
{
//关于upanyun基本配置项就不做细述了，我们这里配置到后台，直接读取
$bucket = ...
$form_api_secret = ...

$options = array(
'bucket' => $bucket, // 空间名
'expiration' => time() + 600, // 授权过期时间
'save-key' => '/img/{year}/{mon}/{random}{.suffix}',
'allow-file-type' => 'jpg,jpeg,gif,png,doc,pdf,mp3,mp4,amr',
);
//policy算法和signature算法具体请参考API文档，不做细述
$policy = base64_encode(json_encode($options));
$sign = md5($policy.'&'.$form_api_secret); /// MD5的操作员密码

return array(
'sign' => $sign,
'policy' => $policy,
'bucket' => $bucket,
);
}

//controller文件，我们利用上面的function,获取上传到upyun的配置信息
$configUpYun = getUpYunConfig();

//异步上传文件的核心是要利用xhr2的FormData对象进行操作。
//view视图文件
<input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple id="upload_head">
<input type="hidden" name="head">

<script type="text/javascript">
+function($){
$.policy = '<?php echo $configUpYun["policy"];?>';
$.signature = '<?php echo $configUpYun["sign"];?>';

//上传头像
$("#upload_head").on("change", function () {
var formData = new FormData(); //构造空对象，下面用append 方法赋值。
formData.append("policy", $.policy);
formData.append("signature", $.signature);
formData.append("file", $("#upload_head")[0].files[0]);
$.ajax({
url : "/upload.php",
type : "POST",
data : formData,
processData : false,
contentType : false,
beforeSend: function () {
//可以做一些正在上传的效果
},
success : function(data) {
//data，我们这里是异步上传到upanyun后返回的图片地址，详细看下面的upload.php
},
error : function(responseStr) {
console.log(responseStr);
}
});
});
}($);

//upload.php 我们异步处理上传文件的程序
$url = upload2upy($_FILES['file']);
exit($url);

//upload2upy方法可参考upyun官方php-sdk文件 https://github.com/upyun/php-sdk </script>

实现异步上传到upyun的核心：

①、利用xhr2的FormData对象

②、参考php-sdk文档即可