fileupload做ajax异步上传文件详解

fileupload是一个jquery下的ajax文件上传插件 

下载下来的包东西很多,很多也是没必要的,这里只谈谈最小级别的应用 

首先,依赖js: 

  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  2. <script src="js/vendor/jquery.ui.widget.js"></script>
  3. <script src="js/jquery.iframe-transport.js"></script>
  4. <script src="js/jquery.fileupload.js"></script>
复制代码
缺一不可(如果已经引入jquery-ui包则jquery.ui.wiget.js不需要再次引入) 
大部分资料其实官网上都能找到,说点官网没有的或者说的不够清楚的 
附上官方API:https://github.com/blueimp/jQuery-File-Upload/wiki/API 

调用方式: 
Html代码
  1. <input type="file" name="files" id="fileupload_input" />
复制代码
jsp代码
  1. $("#fileupload_input").fileupload({
  2.     url:"files/upload",//文件上传地址,当然也可以直接写在input的data-url属性内
  3.     formData:{param1:"p1",param2:"p2"},//如果需要额外添加参数可以在这里添加
  4.     done:function(e,result){
  5.         //done方法就是上传完毕的回调函数,其他回调函数可以自行查看api
  6.         //注意result要和jquery的ajax的data参数区分,这个对象包含了整个请求信息
  7.         //返回的数据在result.result中,假设我们服务器返回了一个json对象
  8.         console.log(JSON.stringify(result.result));
  9.     }
  10. })

复制代码



实例:

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

阅读更多
换一批

没有更多推荐了,返回首页