วิธีคำนวณ md5 hash ของไฟล์โดยใช้ javascript

มีวิธีคำนวณแฮช MD5 ของไฟล์ก่อนอัปโหลดไปยังเซิร์ฟเวอร์โดยใช้ Javascript หรือไม่

แม้ว่าจะมีการใช้งาน JSของอัลกอริทึม MD5 แต่โดยทั่วไปเบราว์เซอร์รุ่นเก่าไม่สามารถอ่านไฟล์จากระบบไฟล์ภายในเครื่องได้

ฉันเขียนว่าในปี 2009 แล้วเบราว์เซอร์ใหม่ล่ะ

ด้วยเบราว์เซอร์ที่รองรับFileAPIคุณ * สามารถ * อ่านเนื้อหาของไฟล์ได้ - ผู้ใช้จะต้องเลือกโดยใช้<input>องค์ประกอบหรือลากแล้วปล่อย ในเดือนมกราคม 2013 ต่อไปนี้เป็นวิธีที่เบราว์เซอร์หลัก ๆ ซ้อนกัน:

• FF 3.6 รองรับFileReader , FF4 รองรับการทำงานที่ใช้ไฟล์ได้มากขึ้น
• Chrome รองรับ FileAPI ตั้งแต่เวอร์ชัน 7.0.517.41
• Internet Explorer 10 รองรับ FileAPIบางส่วน
• Opera 11.10 รองรับ FileAPI บางส่วน
• ซาฟารี - ฉันไม่สามารถหาแหล่งที่มาอย่างเป็นทางการที่ดีสำหรับการนี้ แต่เว็บไซต์นี้แสดงให้เห็นการสนับสนุนบางส่วนจาก 5.1 สนับสนุนอย่างเต็มที่สำหรับ 6.0 บทความอื่นรายงานความไม่สอดคล้องกับ Safari เวอร์ชันเก่า

ฉันได้สร้างไลบรารีที่ใช้ md5 แบบเพิ่มหน่วยเพื่อแฮชไฟล์ขนาดใหญ่อย่างมีประสิทธิภาพ โดยทั่วไปคุณอ่านไฟล์เป็นชิ้น ๆ (เพื่อให้หน่วยความจำเหลือน้อย) และแฮชไฟล์ทีละน้อย คุณมีการใช้งานพื้นฐานและตัวอย่างใน readme

โปรดทราบว่าคุณต้องใช้ HTML5 FileAPI ดังนั้นอย่าลืมตรวจสอบ มีตัวอย่างเต็มในโฟลเดอร์ทดสอบ

https://github.com/satazor/SparkMD5

มันสวยง่ายในการคำนวณกัญชา MD5 โดยใช้ฟังก์ชั่นของ MD5 CryptoJSและHTML5 FileReader API ข้อมูลโค้ดต่อไปนี้แสดงวิธีการอ่านข้อมูลไบนารีและคำนวณแฮช MD5 จากรูปภาพที่ลากไปยังเบราว์เซอร์ของคุณ:

var holder = document.getElementById('holder');

holder.ondragover = function() {
  return false;
};

holder.ondragend = function() {
  return false;
};

holder.ondrop = function(event) {
  event.preventDefault();

  var file = event.dataTransfer.files[0];
  var reader = new FileReader();

  reader.onload = function(event) {
    var binary = event.target.result;
    var md5 = CryptoJS.MD5(binary).toString();
    console.log(md5);
  };

  reader.readAsBinaryString(file);
};

ฉันแนะนำให้เพิ่ม CSS เพื่อดูพื้นที่ Drag & Drop:

#holder {
  border: 10px dashed #ccc;
  width: 300px;
  height: 300px;
}

#holder.hover {
  border: 10px dashed #333;
}

สามารถดูข้อมูลเพิ่มเติมเกี่ยวกับฟังก์ชัน Drag & Drop ได้ที่นี่: File API & FileReader

ฉันทดสอบตัวอย่างใน Google Chrome เวอร์ชัน 32

HTML5 + spark-md5และQ

สมมติว่าคุณใช้เบราว์เซอร์รุ่นใหม่ (ที่รองรับ HTML5 File API) ต่อไปนี้คือวิธีคำนวณMD5 Hashของไฟล์ขนาดใหญ่ (จะคำนวณแฮชในส่วนของตัวแปร)

function calculateMD5Hash(file, bufferSize) {
  var def = Q.defer();

  var fileReader = new FileReader();
  var fileSlicer = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
  var hashAlgorithm = new SparkMD5();
  var totalParts = Math.ceil(file.size / bufferSize);
  var currentPart = 0;
  var startTime = new Date().getTime();

  fileReader.onload = function(e) {
    currentPart += 1;

    def.notify({
      currentPart: currentPart,
      totalParts: totalParts
    });

    var buffer = e.target.result;
    hashAlgorithm.appendBinary(buffer);

    if (currentPart < totalParts) {
      processNextPart();
      return;
    }

    def.resolve({
      hashResult: hashAlgorithm.end(),
      duration: new Date().getTime() - startTime
    });
  };

  fileReader.onerror = function(e) {
    def.reject(e);
  };

  function processNextPart() {
    var start = currentPart * bufferSize;
    var end = Math.min(start + bufferSize, file.size);
    fileReader.readAsBinaryString(fileSlicer.call(file, start, end));
  }

  processNextPart();
  return def.promise;
}

function calculate() {

  var input = document.getElementById('file');
  if (!input.files.length) {
    return;
  }

  var file = input.files[0];
  var bufferSize = Math.pow(1024, 2) * 10; // 10MB

  calculateMD5Hash(file, bufferSize).then(
    function(result) {
      // Success
      console.log(result);
    },
    function(err) {
      // There was an error,
    },
    function(progress) {
      // We get notified of the progress as it is executed
      console.log(progress.currentPart, 'of', progress.totalParts, 'Total bytes:', progress.currentPart * bufferSize, 'of', progress.totalParts * bufferSize);
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.4.1/q.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/2.0.2/spark-md5.min.js"></script>

<div>
  <input type="file" id="file"/>
  <input type="button" onclick="calculate();" value="Calculate" class="btn primary" />
</div>

คุณต้องใช้ FileAPI มีอยู่ใน FF & Chrome ล่าสุด แต่ไม่ใช่ IE9 คว้าการใช้งาน md5 JS ที่แนะนำข้างต้น ฉันได้ลองสิ่งนี้แล้วและทิ้งไปเพราะ JS ช้าเกินไป (นาทีสำหรับไฟล์ภาพขนาดใหญ่) อาจกลับมาดูอีกครั้งหากมีคนเขียน MD5 ใหม่โดยใช้อาร์เรย์ที่พิมพ์

โค้ดจะมีลักษณะดังนี้:

HTML:     
<input type="file" id="file-dialog" multiple="true" accept="image/*">

JS (w JQuery)

$("#file-dialog").change(function() {
  handleFiles(this.files);
});

function handleFiles(files) {
    for (var i=0; i<files.length; i++) {
        var reader = new FileReader();
        reader.onload = function() {
        var md5 = binl_md5(reader.result, reader.result.length);
            console.log("MD5 is " + md5);
        };
        reader.onerror = function() {
            console.error("Could not read the file");
        };
        reader.readAsBinaryString(files.item(i));
     }
 }

นอกเหนือจากความเป็นไปไม่ได้ที่จะเข้าถึงระบบไฟล์ใน JS ฉันจะไม่ไว้วางใจใด ๆ เลยในการตรวจสอบที่ไคลเอ็นต์สร้างขึ้น ดังนั้นการสร้าง checksum บนเซิร์ฟเวอร์จึงมีผลบังคับใช้ไม่ว่าในกรณีใด ๆ - Tomalak 20 เม.ย. 52 เวลา 14:05 น

ซึ่งไม่มีประโยชน์ในกรณีส่วนใหญ่. คุณต้องการให้ MD5 คำนวณที่ฝั่งไคลเอ็นต์เพื่อให้คุณสามารถเปรียบเทียบกับโค้ดที่คำนวณใหม่ที่ฝั่งเซิร์ฟเวอร์และสรุปว่าการอัปโหลดผิดพลาดหากแตกต่างกัน ฉันจำเป็นต้องทำเช่นนั้นในแอปพลิเคชันที่ทำงานกับไฟล์ข้อมูลวิทยาศาสตร์ขนาดใหญ่ซึ่งการรับไฟล์ที่ไม่เสียหายเป็นกุญแจสำคัญ กรณีของฉันเป็นเรื่องง่ายเนื่องจากผู้ใช้มี MD5 ที่คำนวณจากเครื่องมือวิเคราะห์ข้อมูลอยู่แล้วดังนั้นฉันจึงต้องถามพวกเขาด้วยช่องข้อความ

ในการรับแฮชของไฟล์มีตัวเลือกมากมาย โดยปกติปัญหาคือมันช้ามากในการรับแฮชของไฟล์ขนาดใหญ่

ฉันสร้างไลบรารีเล็ก ๆ ที่ได้รับแฮชของไฟล์โดยมี 64kb ของจุดเริ่มต้นของไฟล์และ 64kb ของส่วนท้าย

ตัวอย่างสด: http://marcu87.github.com/hashme/และห้องสมุด: https://github.com/marcu87/hashme

มีสคริปต์สองสามรายการบนอินเทอร์เน็ตเพื่อสร้าง MD5 Hash

หนึ่งจาก webtoolkit ดีhttp://www.webtoolkit.info/javascript-md5.html

แม้ว่าฉันไม่เชื่อว่าจะสามารถเข้าถึงระบบไฟล์ในเครื่องได้เนื่องจากการเข้าถึงนั้นมี จำกัด

หวังว่าคุณจะพบทางออกที่ดีในตอนนี้ หากไม่เป็นเช่นนั้นวิธีการแก้ปัญหาด้านล่างนี้เป็นการใช้งาน ES6 ตามjs-spark-md5

import SparkMD5 from 'spark-md5';

// Read in chunks of 2MB
const CHUCK_SIZE = 2097152;

/**
 * Incrementally calculate checksum of a given file based on MD5 algorithm
 */
export const checksum = (file) =>
  new Promise((resolve, reject) => {
    let currentChunk = 0;
    const chunks = Math.ceil(file.size / CHUCK_SIZE);
    const blobSlice =
      File.prototype.slice ||
      File.prototype.mozSlice ||
      File.prototype.webkitSlice;
    const spark = new SparkMD5.ArrayBuffer();
    const fileReader = new FileReader();

    const loadNext = () => {
      const start = currentChunk * CHUCK_SIZE;
      const end =
        start + CHUCK_SIZE >= file.size ? file.size : start + CHUCK_SIZE;

      // Selectively read the file and only store part of it in memory.
      // This allows client-side applications to process huge files without the need for huge memory
      fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    };

    fileReader.onload = e => {
      spark.append(e.target.result);
      currentChunk++;

      if (currentChunk < chunks) loadNext();
      else resolve(spark.end());
    };

    fileReader.onerror = () => {
      return reject('Calculating file checksum failed');
    };

    loadNext();
  });

ตัวอย่างต่อไปนี้แสดงตัวอย่างซึ่งสามารถเก็บทรูพุตได้ 400 MB / s ในขณะที่อ่านและแฮชไฟล์

ใช้ไลบรารีที่เรียกว่าhash-wasmซึ่งใช้ WebAssembly และคำนวณแฮชได้เร็วกว่าไลบรารี js-only ในปี 2020 เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับ WebAssembly

const chunkSize = 64 * 1024 * 1024;
const fileReader = new FileReader();
let hasher = null;

function hashChunk(chunk) {
  return new Promise((resolve, reject) => {
    fileReader.onload = async(e) => {
      const view = new Uint8Array(e.target.result);
      hasher.update(view);
      resolve();
    };

    fileReader.readAsArrayBuffer(chunk);
  });
}

const readFile = async(file) => {
  if (hasher) {
    hasher.init();
  } else {
    hasher = await hashwasm.createMD5();
  }

  const chunkNumber = Math.floor(file.size / chunkSize);

  for (let i = 0; i <= chunkNumber; i++) {
    const chunk = file.slice(
      chunkSize * i,
      Math.min(chunkSize * (i + 1), file.size)
    );
    await hashChunk(chunk);
  }

  const hash = hasher.digest();
  return Promise.resolve(hash);
};

const fileSelector = document.getElementById("file-input");
const resultElement = document.getElementById("result");

fileSelector.addEventListener("change", async(event) => {
  const file = event.target.files[0];

  resultElement.innerHTML = "Loading...";
  const start = Date.now();
  const hash = await readFile(file);
  const end = Date.now();
  const duration = end - start;
  const fileSizeMB = file.size / 1024 / 1024;
  const throughput = fileSizeMB / (duration / 1000);
  resultElement.innerHTML = `
    Hash: ${hash}<br>
    Duration: ${duration} ms<br>
    Throughput: ${throughput.toFixed(2)} MB/s
  `;
});

<script src="https://cdn.jsdelivr.net/npm/hash-wasm"></script>
<!-- defines the global `hashwasm` variable -->

<input type="file" id="file-input">
<div id="result"></div>

ด้วย HTML5 ปัจจุบันน่าจะเป็นไปได้ที่จะคำนวณแฮช md5 ของไฟล์ไบนารี แต่ฉันคิดว่าขั้นตอนก่อนหน้านั้นคือการแปลง BlobBuilder ข้อมูลซ้ำ ๆ เป็นสตริงฉันกำลังพยายามทำขั้นตอนนี้: แต่ยังไม่สำเร็จ

นี่คือรหัสที่ฉันลอง: การแปลง BlobBuilder เป็นสตริงใน HTML5 Javascript

ฉันไม่เชื่อว่ามีวิธีในจาวาสคริปต์ในการเข้าถึงเนื้อหาของการอัปโหลดไฟล์ ดังนั้นคุณจึงไม่สามารถดูเนื้อหาของไฟล์เพื่อสร้างผลรวม MD5 ได้

อย่างไรก็ตามคุณสามารถส่งไฟล์ไปยังเซิร์ฟเวอร์ซึ่งสามารถส่งผลรวม MD5 กลับหรือส่งเนื้อหาไฟล์กลับได้ .. แต่นั่นเป็นงานที่ต้องใช้มากและอาจไม่คุ้มกับวัตถุประสงค์ของคุณ