Tải lên tệp trong extjs 4.2 mà không cần form.submit()

Question

Tôi đang cố gắng tải lên tệp (tính từ bây giờ của bất kỳ tiện ích mở rộng nào) trong extjs. Tôi có một mô hình và cửa hàng. tệp tải lên xảy ra từ cửa sổ và tôi không có biểu mẫu trong cửa sổ. Tất cả các ví dụ tôi đã thử trong net là với form.submit(). Tôi thay vì sử dụng và Ajax gọi như dưới đây để gửi dữ liệu đến máy chủ.

Ext.Ajax.request({ 

      url : 'qaf/saveSetupDetails.action', 

      params : { 
       'data' : recordsToSend 
      }, 
      failure : function(response){ 
       //console.log('error connecting controller'); 
      }, 
      success : function(response){ 
       //console.log('successfully submitted'); 
      } 
     }); 

Bản ghi để gửi dữ liệu được nhận như sau.

var store = Ext.getStore('SomeStore'); 
     var modifiedRecords = store.getModifiedRecords(); 
     var recordsToSend = []; 
     if(modifiedRecords.length > 0){ 
      Ext.each(modifiedRecords, function(record){ 
       recordsToSend.push(record.data);//I'm sure that this is so dump but this is how I do it for other records which are string and not sure how to do it for a file... 
      }); 
     } 
     Ext.USE_NATIVE_JSON = true; 
     recordsToSend = Ext.encode(recordsToSend); 

Trong khi thiết lập kỷ lục trong mô hình, tôi sử dụng mã dưới đây ..

var rec = Ext.create('QAF.model.MyModel'); 
rec.set('modelField',Ext.getCmp('fileUploadCompID').value); 

tôi nhận được một lỗi 500 trạng thái với các phản ứng "Cannot convert value of type [java.lang.String] to required type [org.springframework.web.multipart.commons.CommonsMultipartFile]"

Tôi chắc chắn rằng đây là vì cách tôi đặt giá trị cho mô hình là Ext.getCmp('fileUploadCompID').value cung cấp tên tệp. Vui lòng cho tôi biết cách đặt tệp cho mô hình và loại dữ liệu tôi phải chỉ định cho trường trong mô hình.

Dưới đây là cách tôi cố truy xuất tệp trong bộ điều khiển lò xo.

@RequestMapping (value = "/qaf/saveSetupDetails.action") 
    public @ResponseBody 
    void saveSetupDetails(@RequestParam CommonsMultipartFile data)throws Exception{ 
     log.info("Enter into saveSetupDetails method..." + data.getOriginalFilename()); 
    } 

Xin vui lòng cho tôi biết những gì tôi đang làm sai và những gì đã được thực hiện để sửa lỗi này ...

Answer 1

Bạn không thể làm điều đó với filefield của ExtJS

filefield của ExtJS trả về chuỗi url từ tệp được chọn.

tôi nghĩ rằng bạn cần tập tin được lựa chọn như xảy ra trong trường hợp thay đổi nhưng filefield không có sự kiện này

bạn có thể sử dụng giải pháp này, có lẽ bạn sẽ có được một ý tưởng từ dung dịch

Ví dụ: http://jsfiddle.net/e3M3e/e8V7g/

var itemFile = null; 
Ext.create('Ext.panel.Panel', { 
    title: 'Hello', 
    width: 400, 
    html: "<input id='inputFile' type='file' name='uploaded'/>", 
    renderTo: Ext.getBody(), 
    listeners: { 
     afterrender: function() { 
      itemFile = document.getElementById("inputFile");    
      itemFile.addEventListener('change', EventChange, false); 
     } 
    } 
}); 

function EventChange(e){  
    var files = itemFile.files; 
    console.log(files); 
} 

Answer 2

Nếu bạn muốn vẫn sử dụng ExtJS của fileuploadfield và tải lên thông qua một cuộc gọi AJAX sử dụng HTML5 FileReader, bạn có thể làm điều đó như ví dụ:

launchUpload: function() { 
    //get a handle of the "file" input in the widget itself... 
    var fileInput = document.getElementById(yourUploadField.button.fileInputEl.id); 
    var fileReader = New FileReader(); 
    var fileToUpload = fileInput.files[0]; //assuming your only uploading one file... 
    var me = this 

    fileReader.onload = function (e) { 
     me.onLoadFile(e, me, fileToUpload.name); 
    } 

    fileReader.readAsDataURL(fileToUpload); 

}, 
onLoadFile: function (e, scope, filename) { 

    //I carry the scope around for functionality... 

    Ext.Ajax.request({ 
     method: 'POST', 
     url: 'url', 
     scope: scope, 
     jsonData: { fileNameParameter: filename, fileDatainBase64: e.target.result}, 
     success: function (response, operation) { 
      //success.. 
     }, 
     failure: function (response, operation) { 
      //failure... 
     } 
    });  

} 

Answer 3

ExtJs phiên bản 6.0.1 - Sử dụng iframe

Ext.define('xxx.yyy.UploadData', { 
    extend : 'Ext.form.Panel', 
    alias : 'widget.uploaddata', 

    initComponent : function(){   
     var me = this;   

     me.items = [{ 
      xtype  : 'filefield', 
      margin  : '20 0 0 20', 
      name  : 'excelfile', 
      fieldLabel : 'Choose file', 
      msgTarget : 'side', 
      allowBlank : false, 
      anchor  : '30%', 
      buttonText : 'Select', 
      defaultButtonTarget : 'fileframe' 
     },{ 
      xtype : 'panel', 
      html : '<iframe width="340" height="340" style="display: none" name="fileframe"></iframe>' 
     },{ 
      xtype : 'button', 
      text : 'Import', 
      handler : function(){ 
      var form = this.up('form').getForm(); 
      if(form.isValid()){ 
       form.submit({ 
        url  : './upload.php', 
        waitMsg : 'uploading...', 
        success : function(fp, o) { 
         alert("OK");        
        } 
       }); 
      } 
     } 
    }]; 

    me.callParent();   
    }  
    }); 

Answer 4

Có, bạn có thể sử dụng Ajax và FormData API:

var file = s.fileInputEl.dom.files[0], 
    data = new FormData(); 
data.append('file', file); 
Ext.Ajax.request({ 
    url: '/upload/files', 
    rawData: data, 
    headers: {'Content-Type':null}, //to use content type of FormData 
    success: function(response){ 
    } 
}); 

Xem demo của tôi here