Apex Oracle:如何使用Ajax上传文件?

时间:2018-06-23 01:23:15

标签: ajax oracle apex

我正在创建一个APEX应用程序。

我正在尝试编写自定义上传过程(由于某些原因,我不想使用默认文件上传过程)

这是我的HTML:

<input type="file" id="CoverLoader"/>
<a href="#" onclick="UploadTheFile(0);" />Load File</a>

然后我有两个调用单独的AjaxCall backs的Javascript函数

功能1:

function SetFileInfo(FileName, LastModified, MymeType) {
 console.log('3-setting file info');
 apex.server.process(
 'SetFileInfo',                             
      {x01: FileName, x02: LastModified, x03: MymeType},
           {
             success: function (pData) {             
             console.log('6-file info set');
             },
        dataType: "text"                        
      }
   );

}

功能2:

      function CallAjax (Blob) {
        console.log('5-uploading blob');
        apex.server.process(
                'UploadFile',                             
                {f01: Blob},                                                                          
                {
                  success: function (pData) {            
                          alert(pData);
                          console.log('7-blob uploaded');
                  },
                  dataType: "text"                       
                }
        );
      }  

以及click事件处理程序:

//-----------------------------------------------------------
// Main Functions 
//-----------------------------------------------------------

function UploadTheFile(a) {
    console.log('1-Upload the file');
    var files = document.getElementById('CoverLoader').files;

    if (!files.length) {
        alert("Merci de choisir un fichier image s'il vous plaît !");
        return;   
        }

    var file = files[0];
    console.log('2-File selected');

    // Set the file informations
    SetFileInfo(file.name, file.lastModifiedDate, file.mime);

    // Loop to upload the file
    ReadBlob(file,0);
}

function ReadBlob(file, Step) {
    var StepSize;
    var StartByte, EndByte;
    var Start, Stop;
    var Finished = 0;

    // Define the reading size
    StepSize = 1000;
    StartByte = Step * StepSize ;
    EndByte = (Step + 1 ) * StepSize - 1;

    if (EndByte > file.size - 1) {Finished = 1;}
    Start = parseInt(StartByte) || 0;
    Stop = parseInt(EndByte) || file.size - 1;

    var Reader = new FileReader();
    Reader.onloadend = function(evt) {
        if (evt.target.readyState == FileReader.DONE) { 
            console.log('4-try to upload to database');
            CallAjax(Blob);
            console.log('6-uploaded ' + Step);

            if (Finished == 0) {
                ReadBlob(file, Step +1);
            }
    }
};

var Blob = file.slice(Start, Stop + 1);
Reader.readAsBinaryString(Blob);
}

这是Ajax回调

SetFileInfo

declare 
    EventId number := 341;
    FileName varchar2(500);
    MimeType varchar2(500);
    LastModified date;

    begin     
        FileName := apex_application.g_x01;
        --LastModified := apex_application.g_x02;
        MimeType := apex_application.g_x03;
        MY_UPLOADS.CreateFile(EventId, FileName, MimeType, null);
        htp.p('ok');
    end;

上传文件

declare 
    EventId number := 341;
    Data_ blob;
    l_token VARCHAR2(32000);
    l_blob  BLOB := empty_blob();
    Destination blob;
begin     
    dbms_lob.createtemporary(l_blob, TRUE, dbms_lob.session);   
    FOR i IN 1 .. apex_application.g_f01.count

    LOOP
        l_token := wwv_flow.g_f01(i);
        IF length(l_token) > 0 THEN          
            dbms_lob.append(l_blob,to_blob(utl_encode.base64_decode(utl_raw.cast_to_raw(l_token))));

    END IF;
  END LOOP;
dbms_lob.createtemporary(Destination, TRUE, dbms_lob.session);
DBMS_LOB.APPEND(Destination, l_blob);
commit;

update My_event set CoverPicture = Destination where id = eventid;    

  htp.p('15');

end;

当我运行页面并尝试上传文件时,文件被上传,表格列被填充。但是,当我将文件下载回计算机时,内容与原始文件有所不同。就像文件损坏了。

请问我在做错什么吗?

干杯

0 个答案:

没有答案