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