Rumah > pembangunan bahagian belakang > tutorial php > 异步上传到又拍云的实例教程,异步上传实例教程_PHP教程

异步上传到又拍云的实例教程,异步上传实例教程_PHP教程

WBOY
Lepaskan: 2016-07-12 08:54:07
asal
899 orang telah melayarinya

异步上传到又拍云的实例教程,异步上传实例教程

作者:白狼 出处:www.manks.top/article/async_upload_to_upyun 

本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

网站静态文件存储在又拍云,之前上传是通过又拍云的的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">
Salin selepas log masuk

如你所想,仅仅是一个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>
Salin selepas log masuk

到此,我们已经实现了异步上传的前端代码,包括又拍云所需要的参数policysignature

剩下的实现上传到又拍云就简单了,可以参考

https://github.com/upyun/php-sdk 进行处理

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/1121566.htmlTechArticle异步上传到又拍云的实例教程,异步上传实例教程 作者:白狼 出处:www.manks.top/article/async_upload_to_upyun 本文版权归作者,欢迎转载,但未经...
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan