安裝jQuery文件上傳

我想用ember.js使用jquery文件上傳。我希望實現的是有一個文件輸入，當用戶瀏覽圖片並點擊上傳按鈕，jquery文件上傳將上傳文件，並返回上傳文件的位置，然後..我會從其他數據收集表單的其餘部分並使用ember數據發佈信息，其中將包括圖像url和表單數據的其餘部分。安裝jQuery文件上傳

我不能讓它工作，但相同的代碼與PHP後端與純HTML文件的作品。

在這裏，我已經包括在jsbin非功能的代碼，其中包括我的模板和app.js代碼

http://jsbin.com/EtOzeKI/1/edit

來源

2013-10-27 monk

什麼部分的代碼不能正常工作？這完全有可能。 – Kingpin2k

當我選擇圖像，並點擊上傳沒有任何反應 – monk

在控制檯上沒有錯誤什麼都沒有..我有困難的時候這東西geting – monk

這裏是一個上傳按鈕，我在我的應用程序中使用：它建立了一個輸入按鈕，自動上傳更改。

{{view App.UploadButton groupBinding="model"}} 


App.UploadButton = Ember.View.extend({ 
    tagName: 'input', 
    attributeBindings: ['type'], 
    type: 'file', 
    originalText: 'Upload Finished Product', 
    uploadingText: 'Busy Uploading...', 

    newItemHandler: function (data) { 
     var store = this.get('controller.store'); 

     store.push('item', data); 
    }, 

    preUpload: function() { 
     var me = this.$(), 
      parent = me.closest('.fileupload-addbutton'), 
      upload = this.get('uploadingText'); 

     parent.addClass('disabled'); 
     me.css('cursor', 'default'); 
     me.attr('disabled', 'disabled'); 
    }, 

    postUpload: function() { 
     var me = this.$(), 
      parent = me.closest('.fileupload-addbutton'), 
      form = parent.closest('#fake_form_for_reset')[0], 
      orig = this.get('originalText'); 

     parent.removeClass('disabled'); 
     me.css('cursor', 'pointer'); 
     me.removeAttr('disabled'); 
     form.reset(); 
    }, 

    change: function (e) { 
     var self = this; 
     var formData = new FormData(); 
     // This is just CSS 
     this.preUpload(); 
     formData.append('group_id', this.get('group.id')); 
     formData.append('file', this.$().get(0).files[0]); 
     $.ajax({ 
      url: '/file_upload_handler/', 
      type: 'POST', 
      //Ajax events 
      success: function (data) { self.postUpload(); self.newItemHandler(data); }, 
      error: function() { self.postUpload(); alert('Failure'); }, 
      // Form data 
      data: formData, 
      //Options to tell jQuery not to process data or worry about content-type. 
      cache: false, 
      contentType: false, 
      processData: false 
     }); 
    } 
});

來源

2013-10-27 17:16:57 Kingpin2k

它說textSpan是undefined，textspan的功能是什麼 – monk

這只是文本跨度，我正在改變跨度的文本，隨時刪除它，我在上面做了。 – Kingpin2k

上傳和上傳都只是CSS，你可以完全刪除它們，它們是無關的。 – Kingpin2k

這裏有一個最小的組件，您可以使用：

// index.html 
<script src="/vendor/jquery/jquery.js"></script> 
<script src="/vendor/jquery-ui/ui/jquery-ui.js"></script> 
<script src="/vendor/jquery-file-upload/js/jquery.iframe-transport.js"></script>/script> 
<script src="/vendor/jquery-file-upload/js/jquery.fileupload.js"></script> 

// components/file-upload.js 
export default Ember.TextField.extend({ 
    attributeBindings: ['name', 'data-url', 'multiple'], 
    tagName: "input", 
    type: 'file', 
    name: "file[]", 

    "data-url": function(){ 
     return this.get("path"); 
    }.property("path"), 

    multiple: true, 

    didInsertElement: function() { 
     this.$().fileupload(); 
    } 
}); 

// to use in your hbs template 
{{file-upload path="pathToUploadTo"}}

來源

2014-01-21 03:49:45 opsb

安裝jQuery文件上傳

回答

相關問題