又拍云异步上传实例教程详解
更新时间：2016年04月19日 16:05:04 作者：白狼栈
这篇文章主要介绍了又拍云异步上传实例教程详解的相关资料,需要的朋友可以参考下
网站静态文件存储在又拍云，之前上传是通过又拍云的的FORM API进行。
当产品经理歪着脑袋走向你的时候，哎呀呀，这用户信息这里，上传要无刷新的效果了。
这他***，自己偷偷抱怨一会会，怎么搞喃？听说这家伙要一个好听的名字，异步上传，高大上档次挺像我的。
根据我们的观察，此处有两个重点：
①、怎么实现异步上传
②、怎么上传到又 拍 云
首先我们要实现异步上传，就需要利用js里面的FormData对象，据说，这家伙不支持ie6 7的，ie8就不太清楚了，据说哈，说错了不负责的。
不过喃，我们也不用考虑辣么多，前段时间都听说淘宝都要放弃ie6 7了，so 甭考虑辣么多了。ie6 7逮着ta估计都要骂ta小婊砸，竟然敢不支持我。
FormData是谁，这里就不多介绍了，可以自行百度。
我们先来看看view层怎么使用FormData这个小婊砸
<input type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="upload"> <input type="hidden" name="file">
如你所想，仅仅是一个input上传按钮和一个我们预留的准备接收图片地址的隐藏input
下面来看看JS是怎么愤怒的吧
<script type="text/javascript">
function($){
//上传
$("#upload").on("change", function () {
//构造FormData对象并赋值
var formData = new FormData();
formData.append("policy", "//controller层传递过来upYun的policy配置");
formData.append("signature", "//controller层传递过来upyun的signature配置");
formData.append("file", $("#upload")[0].files[0]);
$.ajax({
url : "//处理上传的后端程序地址",
type : "POST",
data : formData,
processData : false,
contentType : false,
beforeSend: function () {
//可以做一些正在上传的效果
},
success : function(data) {
//data，我们这里是异步上传到后端程序所返回的图片地址
},
error : function(responseStr) {
console.log(responseStr);
}
});
});
}($);
</script>
到此，我们已经实现了异步上传的前端代码，包括又拍云所需要的参数policy和signature
剩下的实现上传到又拍云就简单了，可以参考
https://github.com/upyun/php-sdk 进行处理
您可能感兴趣的文章:
相关文章
thinkphp3.x中display方法及show方法的用法实例
这篇文章主要介绍了thinkphp3.x中display方法及show方法的用法,结合实例形式分析了thinkPHP3.x模板的功能、定义、赋值、渲染及输出等技巧,需要的朋友可以参考下2016-05-05
前端在调起苹果支付前,先请求到服务端,服务端先生成一条充值记录,但是状态为：未支付；然后把这个订单id发给前端,前端在支付完成的时候,会收到苹果的支付凭证,将此凭证和订单id回传给服务端,订单id的作用是用来确定是哪一笔,支付凭证是拿来校验是否支付成功2023-08-08
Laravel + Elasticsearch 实现中文搜索的方法
这篇文章主要介绍了Laravel + Elasticsearch 实现中文搜索的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要介绍了thinkphp3.2.2实现生成多张缩略图的方法,通过调用ThinkPHP扩展包的UploadFile类实现针对上传图片的缩略图处理,非常具有实用价值,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了php+mysql实现简单登录注册修改密码系统,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
为了满足用户体验度，需要用户登录才能跳转到页面，这篇文章给大家分享PHP未登录自动跳转到登录页面的实例代码，需要的朋友参考下2016-12-12
这篇文章主要介绍了Laravel框架生命周期与原理,结合实例形式总结分析了Laravel框架针对用户请求响应的完整运行周期、流程、原理,需要的朋友可以参考下2018-06-06
tp数据验证有两种方式，一种是静态方式，一种是动态方式，下面小编给大家带来了ThinkPhp 框架表单验证及ajax验证问题，感兴趣的朋友一起看看吧2017-07-07
下面小编就为大家带来一篇PHP 读取大文件并显示的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
利用PHP的curl函数实现模拟登录的方法。2013-11-11
最新评论