Detailed explanation of the asynchronous upload example tutorial of Youpaiyun

The static files of the website are stored in Youpaiyun. Previously uploaded through Youpaiyun's FORM API.

When the product manager walks towards you with his head tilted, oh, this user information is uploaded here without refresh.

He ***, he complained secretly for a while, how could he whisper? I heard that this guy wants a nice name, uploaded asynchronously, and it looks tall and classy like mine.

According to our observations, there are two points here:

①. How to implement asynchronous upload

②, how to upload it to the cloud

First of all, we need to implement asynchronous uploading, we need to use the FormData object in js. It is said that this guy does not support ie6 7, so ie8 is not clear. It is said that he is not responsible for saying it wrong.

But, we don’t have to think too much. I heard that Taobao is going to give up on ie6 7 some time ago, so don’t think too much. ie6 7 I guess I would scold him for being a little bitch, but I dared not support me.

I won’t introduce who FormData is here, you can use Baidu on your own.

Let's first look at how to use FormData, this little bitch.

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

As you think, just an input upload button and a hidden input we reserved to prepare to receive the image address

Let's see how JS is angry

 <script type="text/javascript">
function($){
 //Upload $("#upload").on("change", function () {
 //Construct FormData object and assign value  var formData = new FormData();
  ("policy", "//The controller layer passes upYun's policy configuration");  ("signature", "//The controller layer passes over the signal configuration of upyun");  ("file", $("#upload")[0].files[0]);
  $.ajax({
   url : "//handle the uploaded backend program address",   type : "POST",
   data : formData,
   processData : false,
   contentType : false,
   beforeSend: function () {
    //You can do some uploading effects   },
   success : function(data) {
    //data, here is the image address returned by asynchronous upload to the backend program   },
   error : function(responseStr) {
    (responseStr);
   }
  });
 });
}($);
</script> 

At this point, we have implemented the asynchronous uploaded front-end code, including the parameters policy and signature required by Youpaiyun.

It is easy to upload the remaining implementations to Youpaiyun, you can refer to it

/upyun/php-sdk Perform processing