javascript压缩要上传到数据库的分块图像文件

时间:2019-09-13 19:15:07

标签: javascript oracle blob oracle-apex oracle-apex-19.1

我正在尝试从Apex File浏览器上传图像文件,因为图像文件很大,因此我正在使用Chunked上传技术将图像上传到数据库。一切工作正常,因为Apex Collections中使用了分块文件来传递ajax回调过程以在数据库中进行更新。这是我在javascript中以分块上传图片的代码

var fileInputElem = document.getElementById('P130_FILE_UPLOAD');
var fileIndex = 0;

// builds a js array from long string
function clob2Array(clob, size, array) {
  loopCount = Math.floor(clob.length / size) + 1;
  for (var i = 0; i < loopCount; i++) {
    array.push(clob.slice(size * i, size * (i + 1)));
  }
  return array;
}

// converts binaryArray to base64 string
function binaryArray2base64(int8Array) {
  var data = "";
  var bytes = new Uint8Array(int8Array);
  var length = bytes.byteLength;
  for (var i = 0; i < length; i++) {
    data += String.fromCharCode(bytes[i]);
  }
  return btoa(data);
}

// a recursive function that calls itself to upload multiple files synchronously
function uploadFile(pFileIndex) {
  var file = fileInputElem.files[pFileIndex];
  var reader = new FileReader();

  reader.onload = (function(pFile) {
    return function(e) {
      if (pFile) {
        var base64 = binaryArray2base64(e.target.result);
        var f01Array = [];
        f01Array = clob2Array(base64, 30000, f01Array);

        apex.server.process(
          'UPLOAD_FILE',
          {
            x01: file.name,
            x02: file.type,
            f01: f01Array
          },
          {
            dataType: 'json',
            success: function(data) {
              if (data.result == 'success') {
                fileIndex++;

                if (fileIndex < fileInputElem.files.length) {
                  // start uploading the next file
                  uploadFile(fileIndex);
                } else {
                  // all files have been uploaded at this point
                  spinner.stop();
                  fileInputElem.value = '';
                  $('#uploadedFilesRpt').trigger('apexrefresh');
                }
              } else {
                alert('Oops! Something went terribly wrong. Please try again or contact your application administrator.');
              }
            }
          }
        );
      }
    }
  })(file);
  reader.readAsArrayBuffer(file);
}

// variables for spin.js
var spinner;
var spinTargetElem = document.getElementById('wwvFlowForm');
var spinOptions = {
  lines: 13
, length: 28
, width: 14
, radius: 42
, scale: 1
, corners: 1
, color: '#000'
, opacity: 0.25
, rotate: 0
, direction: 1
, speed: 1
, trail: 60
, fps: 20
, zIndex: 2e9
, className: 'spinner'
, top: '50%'
, left: '50%'
, shadow: false
, hwaccel: false
, position: 'absolute'
}

Ajax回调到服务器级别的进程

declare
  lco_collection_name constant apex_collections.collection_name%type := 'UPLOADED_FILES';
  l_blob blob;
  l_filename varchar2(200);
  l_mime_type varchar2(200);
  l_token varchar2(32000);
begin  
  l_filename := apex_application.g_x01;
  l_mime_type := nvl(apex_application.g_x02, 'application/octet-stream');

  -- build BLOB from f01 30k array (base64 encoded)
  dbms_lob.createtemporary(l_blob, false, 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(
        dest_lob => l_blob,
        src_lob => to_blob(utl_encode.base64_decode(utl_raw.cast_to_raw(l_token)))
      );
    end if;
  end loop;

  -- add collection member (only if BLOB is not null)
  if dbms_lob.getlength(l_blob) is not null then
    apex_collection.add_member(
      p_collection_name => lco_collection_name,
      p_c001 => l_filename,
      p_c002 => l_mime_type,
      p_blob001 => l_blob
    );
  end if;

  apex_json.open_object;
  apex_json.write(
    p_name => 'result',
    p_value => 'success'
  );
  apex_json.close_object;
exception
  when others then
    apex_json.open_object;
    apex_json.write(
      p_name => 'result',
      p_value => 'fail'
    );
    apex_json.close_object;
end;

我唯一想要调整上传图像大小的东西,例如,如果大小大于800x600,则应在客户端而不是服务器端将其大小调整为800x600。请提出一些最佳方法,以便我可以在JavaScript代码中调整图片大小。

0 个答案:

没有答案