下载下来的包东西很多,很多也是没必要的,这里只谈谈最小级别的应用
首先,依赖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>
大部分资料其实官网上都能找到,说点官网没有的或者说的不够清楚的
附上官方API:https://github.com/blueimp/jQuery-File-Upload/wiki/API
调用方式:
Html代码
- <input type="file" name="files" id="fileupload_input" />
- $("#fileupload_input").fileupload({
- url:"files/upload",//文件上传地址,当然也可以直接写在input的data-url属性内
- formData:{param1:"p1",param2:"p2"},//如果需要额外添加参数可以在这里添加
- done:function(e,result){
- //done方法就是上传完毕的回调函数,其他回调函数可以自行查看api
- //注意result要和jquery的ajax的data参数区分,这个对象包含了整个请求信息
- //返回的数据在result.result中,假设我们服务器返回了一个json对象
- console.log(JSON.stringify(result.result));
- }
- })
复制代码
实例:
edit.html.erb文件中:
<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">
<img src="<%= @user.avatar_url %>" height="160" width="160" class="user-avatar">
</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>
app.js文件中:
$('#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);
}
});
url写在html标签中data-url属性中了, 写在这里也可以, 相当与jquery的ajax一样,只不过是ajax上传文件, 请求返回是json格式,所以controller的action执行完后返回upload_photo.json.jbuilder模板
profiles_controller.rb文件中:
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
upload_photo.json.jbuilder文件中:
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