Detailed explanation of Youpaiyun asynchronous upload tutorial, asynchronous tutorial_PHP tutorial

Detailed explanation of Youpaiyun's asynchronous upload tutorial, asynchronous tutorial

Static files of the website are stored in Youpaiyun, and previous uploads were 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.

What the hell is he going to do if he secretly complains for a while? 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 FormData object in js. 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 the 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 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" id="upload">
<input type="hidden" name="file"> 

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

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 for cloud shooting

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

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