Detailed explanation of Youpaiyun asynchronous upload tutorial tutorial Youpaiyun File upload tool Youpai batch upload Meituan Cloud Youpai

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 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 not responsible for my mistake.

However, we don’t need to think too much about it. Some time ago, we heard that Taobao will give up IE6 7, so don’t think about it too much. 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 little bitch FormData in the view layer

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

As you can imagine, it’s just an input upload button and a hidden input we reserved to receive the image address

below Let’s see how angry JS is

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

The remaining implementation is uploaded to Youpaiyun It’s simple, you can refer to

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

The above introduces the detailed explanation of Youpaiyun asynchronous upload tutorial, including Youpaiyun and upload content. I hope it will be helpful to friends who are interested in PHP tutorials.