fileupload做ajax非同步上傳檔案詳解

fileupload是一個jquery下的ajax檔案上傳外掛程式 

下載下來的包東西很多，很多也是沒必要的，這裡只談談最小層級的應用 

首先，依賴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> 複製代碼 缺一不可（如果已經引入jquery-ui包則jquery.ui.wiget.js不需要再次引入） 
大部分資料其實官網上都能找到，說點官網沒有的或者說的不夠清楚的 
附上官方API:https://github.com/blueimp/jQuery-File-Upload/wiki/API 
調用方式： 
Html代碼
<input type="file" name="files" id="fileupload_input" /> 複製代碼 jsp代碼
$("#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