tải lên tệp bằng EXT JS

Question

Các bước để tạo trường Tải lên tệp bằng Ext Js

Answer 1

Nếu bạn xem các ví dụ có sẵn tại www.ExtJS.com, bạn sẽ tìm thấy this one.

Mặc dù dựa trên việc tải lên tệp HTML chuẩn - giống như this answer gợi ý.

Answer 2

Theo bước càng cụ thể có liên quan, sử dụng chức năng hỗ trợ trong ExtJS 3x, tốt nhất của bạn tốt nhất là sử dụng mô-đun này/plugin:

http://dev.sencha.com/deploy/dev/examples/form/file-upload.html

Các kịch bản cốt lõi đi kèm với các gói Ext JS, trong tập tin của bạn chính HTML (nơi bạn đã liên kết với các kịch bản cốt lõi Ext), trong phần đầu sau khi kịch bản khác của bạn đặt:

<script type="text/javascript" src="nameofyourextfolder/examples/ux/fileuploadfield/FileUploadField.js"></script> 

Đáng buồn thay, có isnt một số lượng lớn tài liệu về yếu tố này Ext JS- tuy nhiên cho cơ bản chức năng, bạn có thể tạo ra một hình thức với một trường async tải lên bằng cách sử dụng dưới đây:

  myuploadform= new Ext.FormPanel({ 
       fileUpload: true, 
       width: 500, 
       autoHeight: true, 
       bodyStyle: 'padding: 10px 10px 10px 10px;', 
       labelWidth: 50, 
       defaults: { 
        anchor: '95%', 
        allowBlank: false, 
        msgTarget: 'side' 
       }, 
       items:[ 
       { 
        xtype: 'fileuploadfield', 
        id: 'filedata', 
        emptyText: 'Select a document to upload...', 
        fieldLabel: 'File', 
        buttonText: 'Browse' 
       }], 
       buttons: [{ 
        text: 'Upload', 
        handler: function(){ 
         if(myuploadform.getForm().isValid()){ 
          form_action=1; 
          myuploadform.getForm().submit({ 
           url: 'handleupload.php', 
           waitMsg: 'Uploading file...', 
           success: function(form,action){ 
            msg('Success', 'Processed file on the server'); 
           } 
          }); 
         } 
        } 
       }] 
      }) 

gì mã này sẽ làm là tạo một FormPanel mới với một trường upload và một nút tải lên. Khi bạn nhấp vào nút tải lên - tệp được chọn sẽ được gửi tới kịch bản serverside handleupload.php (hoặc bất kỳ tệp nào bạn gọi nó). Đó là sau đó kịch bản này xử lý những gì bạn muốn làm với các tập tin. Ví dụ về điều này có thể có khả năng là:

$fileName = $_FILES['filedata']['name']; 
    $tmpName = $_FILES['filedata']['tmp_name']; 
    $fileSize = $_FILES['filedata']['size']; 
    $fileType = $_FILES['filedata']['type']; 
    $fp  = fopen($tmpName, 'r'); 
    $content = fread($fp, filesize($tmpName)); 
    $content = addslashes($content); 
    fclose($fp); 
    if(!get_magic_quotes_gpc()){ 
     $fileName = addslashes($fileName); 
    } 
    $query = "INSERT INTO yourdatabasetable (`name`, `size`, `type`, `file`) VALUES ('".$fileName."','".$fileSize."', '".$fileType."', '".$content."')"; 
    mysql_query($query); 

Điều gì sẽ đưa tệp vào một DB SQL. Điều cần ghi nhớ là tệp phía máy chủ xử lý tải lên giống như một biểu mẫu HTML thông thường sẽ ...

Hy vọng điều này sẽ hữu ích!

Answer 3

chỉ đặt id sẽ dẫn đến tên mảng $ _FILES giống với id. Nếu bạn cần phải sử dụng một cái gì đó khác sau đó thiết lập tùy chọn cấu hình tên và nó sẽ sử dụng thay vào đó.

Answer 4

items: { 
    xtype: 'form', 
    border: false, 
    bodyStyle: { 
     padding: '10px' 
    }, 
    items: { 
     xtype: 'multifilefield', 
     labelWidth: 80, 
     fieldLabel: 'Choose file(s)', 
     anchor: '100%', 
     allowBlank: false, 
     margin: 0 
    } 
}, 

sống demo cho ExtJS 4.2.2 là here