Tutorial on asynchronously uploading to Youpaiyun Youpaiyun Qiniu Youpaiyun Financing Youpaiyuntu

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 given in an obvious position on the article page, otherwise it will be retained 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 ***, he secretly complains for a while, how can he do it? I heard that this guy wants a nice name, uploads asynchronously, and is tall and classy, ​​he looks like me.

According to our observation, there are two key points here:

①, how to implement asynchronous upload

②, how to upload to Youpaiyun

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

However, we don’t need to think about how spicy it is. Some time ago, we heard that Taobao will give up IE6 7, so don’t think about how spicy it is. ie6 7 If I catch him, I will probably call him a little bitch for how dare he not support me. Who is

FormData? I won’t introduce it here. You can Baidu 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">
<input type="hidden" name="file">

As you can imagine, it is just an inputupload button and a hidden input that we have reserved to receive the image address

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 cloud shooting. The implementation is simple to upload to Youpai Cloud. You can refer to

https://github.com/upyun/php-sdk for processing

The above has introduced an example tutorial for asynchronous uploading to Youpaiyun, including Youpaiyun and uploading content. I hope it will be helpful to friends who are interested in PHP tutorials.