Example tutorial of asynchronous upload to Youpaiyun, example tutorial of asynchronous upload_PHP tutorial

Asynchronous upload to Youpaiyun tutorial, asynchronous upload tutorial

Author: Bailang Source: www.manks.top/article/async_upload_to_upyun

The copyright of this article belongs to the author, and you are welcome to reprint it. However, this statement must be retained without the author's consent, and a link to the original text must be provided in an obvious position on the article page. Otherwise, we reserve the right to pursue legal liability.

Static files of the website are stored in Youpaiyun. Previously, uploading was done through Youpaiyun's FORM API.

When the product manager tilts his head and walks towards you, oops, the upload of this user information will not have a refresh effect.

This bastard, he secretly complains for a while, what should he do? I heard that this guy wants a nice name, uploads asynchronously, and is tall and classy, ​​he looks like me.

Based on our observations, there are two important points here:

①. How to implement asynchronous upload

②. How to upload to the cloud

First of all, if we want to implement asynchronous upload, we need to use the js object in FormData. It is said that this guy does not support ie6 7. I am not sure about ie8. It is said that I am not responsible for my mistake.

But, we don’t have to think about it too much. I heard some time ago that Taobao will give up IE6 7, so don’t think about it. ie6 7 If I catch him, I will probably call him a little bitch for how dare he not support me.

Who

FormData is, I won’t introduce much here, you can search it yourself.

Let’s first take a look at how to use the view layerFormDataThis little bitch

<input type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="upload">
<input type="hidden" name="file">

As you can imagine, it is just a input upload button and a hidden address input

that we have reserved to receive images.

Let’s see how JS is angry

<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>

At this point, we have implemented the front-end code for asynchronous upload, including the parameters policy and signature

required for Youpaiyun

The rest of the implementation of uploading to Youpai Cloud is simple, you can refer to

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

http://www.bkjia.com/PHPjc/1121566.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1121566.htmlTechArticleAsynchronous upload to Youpaiyun tutorial, asynchronous upload tutorial author: Bailang Source: www.manks. top/article/async_upload_to_upyun The copyright of this article belongs to the author. Reprinting is welcome, but without authorization...