FileUpload do Ajax asynchronous upload file detailed

FileUpload is a jquery ajax file upload Plugin

Download down a lot of things, a lot of is not necessary, here only to talk about the minimum level of application

First, rely on JS:
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src= "Js/vendor/jquery.ui.widget.js" ></script>
<script src= "Js/jquery.iframe-transport.js" ></script>
<script src= "js/jquery.fileupload.js" ></script> copy Code is integral (Jquery.ui.wiget.js does not need to be introduced if Jquery-ui package has been introduced)
Most of the information can actually be found on the official website, saying that the official site is not or is not clear enough
Attached to the official Api:https://github.com/blueimp/jquery-file-upload/wiki/api
Call Mode:
HTML code
<input type= "file" name= "Files" id= "fileupload_input"/> Copy code JSP code
$ ("#fileupload_input"). FileUpload ({
URL: "Files/upload",//File upload address, of course, can also be directly written in the Data-url attribute of input
FORMDATA:{PARAM1: "P1", param2: "P2"},//if additional parameters need to be added here
Done:function (E,result) {
The Done method is the completed callback function, and the other callback functions can view the API itself.
Note that result is to be distinguished from jquery's ajax data parameter, which contains the entire request information
The returned data is in Result.result, assuming that our server has returned a JSON object
Console.log (Json.stringify (Result.result));
}
})

Copy Code

Instance:

In the Edit.html.erb file:

<div class= "Edit-avatar" >
<div class= "Col-lg-4 text-center" >
<div class= "Profile_pic_container picture-main space-sm-2 space-md-2" >
<div class= "Media-photo profile-pic-background" >

</div>
</div>
</div>
<div class= "Col-lg-7" >
<div>
<%= t ("Edit_your_profile.tip")%>
</div>
<div class= "Row space-top-6" >
<div class= "Col-sm-5 space-2" >
<button class= "btn btn-default btn-bnb-black Upload-avatar" >
<%= t ("Edit_your_profile.upload_form_your_files")%>
<input id= "FileUpload" type= "file" name= "image" Data-url= "/host/profiles/upload_photo" >
</button>
</div>
</div>
</div>

In the App.js file:

$ (' #fileupload '). FileUpload ({
DataType: ' JSON ',
Done:function (E, data) {
var avatar_url = Data.result.data.profile_photo.original_url;
$ (". Edit-avatar. User-avatar"). attr ("src", avatar_url);
}
});

The URL is written in the HTML tag data-url attribute, write here also can, quite with jquery Ajax, just is Ajax upload file, request return is JSON format, so controller's action after execution returned Upload_ Photo.json.jbuilder templates

In the Profiles_controller.rb file:

def Upload_photo
@user = Current_User
If @user. profile_photo.present?
@user. Profile_photo.delete
End
@photo = @user. Build_profile_photo
@photo. Update (Image:params[:image])
End

In the Upload_photo.json.jbuilder file:

Json.data do

Json.profile_photo do
Json_photo json, @user. Profile_photo.try (: Image)
End

End


Json.meta do
Json.status Response.Status
End