Внешний интерфейс вычисляет md5 локального файла через spark-md5.js.

внешний интерфейс JavaScript Spark NPM

задний план:

Говоря о том, что я впервые использовал spark-md5.js, это было почти год назад, тогда начальник на заднем плане сказал, что хочет разработать функцию загрузки файлов. Я подумал про себя: что? Что такое загрузка файла в несколько частей, вы никогда не слышали об этом?
Что касается паники в душе в тот момент, то описывать особо не буду, короче для загрузки файла нужен уникальный идентификатор для идентификации файла, и md5 очень подходит. spark-md5.js — очень надежное решение для внешнего интерфейса для локального вычисления md5 перед загрузкой файлов.
spark-md5.js написан иностранцами.Если у вас хороший английский язык и вы хотите узнать больше информации, вы можете перейти на веб-сайт npm, чтобы узнать:Уууу, эта лошадь плюс .com/package/ из-за страха перед…


использовать:

Первое, что нужно сделать, это, конечно же, ввести spark-md5.js в html-файл.Вы можете ввести сжатую версию или версию для разработки в соответствии с вашими потребностями.

Перед этим необходимо объяснить, что здесь используется интерфейс FileReader, предоставляемый html5.В настоящее время браузеры, реализующие этот интерфейс, включают FireFox3.6+, chrome6+ и IE10+, поэтому, если вам нужна дополнительная совместимость, извините, я не еще не нашел хороший метод.
Что касается FileReader, вот высококачественный пост в блоге, о котором можно узнать:blog.CSDN.net/Джек положил Эд/Ах…

Здесь предусмотрены два метода: первый — использовать SparkMD5.hashBinary() для прямой передачи двоичного кода всего файла в md5, который напрямую возвращает файл.Этот метод имеет преимущества для небольших файлов — он прост и быстр.
Другой метод заключается в использовании метода slice() объекта File в js (File.prototype.slice()) для нарезки файлов и передачи их методу spark.appendBinary() один за другим для вычисления и, наконец, вывода через метод spark.end() В результате становится ясно, что этот подход может быть очень полезен для больших файлов — он менее подвержен ошибкам и может предоставить информацию о ходе выполнения вычислений.


Начнем, перейдем к коду:
Сначала первый метод:

            var running = false;    //running用于判断是否正在计算md5
            function doNormalTest( input ) {    //这里假设直接将文件选择框的dom引用传入
                
                if (running) {    // 如果正在计算、不允许开始下一次计算
                    return;
                }
 
                var fileReader = new FileReader(),    //创建FileReader实例
                    time;
 
                fileReader.onload = function (e) {    //FileReader的load事件，当文件读取完毕时触发
                    running = false;
 
                    // e.target指向上面的fileReader实例
                    if (file.size != e.target.result.length) {    //如果两者不一致说明读取出错
                       alert("ERROR:Browser reported success but could not read the file until the end.");
                    } else {
                        console.log(Finished loading!success!!);
                         return SparkMD5.hashBinary(e.target.result);    //计算md5并返回结果
                         
                    }
                };
 
                fileReader.onerror = function () {    //如果读取文件出错，取消读取状态并弹框报错
                    running = false;
                    alert("ERROR:FileReader onerror was triggered, maybe the browser aborted due to high memory usage.");
                };
 
                running = true;
                fileReader.readAsBinaryString( input.files[0] );    //通过fileReader读取文件二进制码
            };


Переходим ко второму способу:

            function doIncrementalTest( input ) {    //这里假设直接将文件选择框的dom引用传入
                if (running) {
                    return;
                }
 
                //这里需要用到File的slice( )方法，以下是兼容写法
                var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                    file = input.files[0],
                    chunkSize = 2097152,                           // 以每片2MB大小来逐次读取
                    chunks = Math.ceil(file.size / chunkSize),
                    currentChunk = 0,
                    spark = new SparkMD5(),    //创建SparkMD5的实例
                    time,
                    fileReader = new FileReader();
 
                fileReader.onload = function (e) {
 
                    console("Read chunk number (currentChunk + 1) of  chunks ");
 
                    spark.appendBinary(e.target.result);                 // append array buffer
                    currentChunk += 1;
 
                    if (currentChunk < chunks) {
                        loadNext();
                    } else {
                        running = false;
                        console.log("Finished loading!");
                        return spark.end();     // 完成计算，返回结果
                    }
                };
 
                fileReader.onerror = function () {
                    running = false;
                    console.log("something went wrong");
                };
 
                function loadNext() {
                    var start = currentChunk * chunkSize,
                        end = start + chunkSize >= file.size ? file.size : start + chunkSize;
 
                    fileReader.readAsBinaryString(blobSlice.call(file, start, end));
                }
 
                running = true;
                loadNext();
            }

Затем вам нужно только вызвать метод doNormalTest или doIncrementalTest в обработчике события onchange входа и передать узел dom элемента ввода.

Кроме того, у автора также есть подробные примеры использования в его демонстрации. Если вы не понимаете, вы можете загрузить его напрямую с помощью следующего метода загрузки и посмотреть демоверсию.

скачать:

Наконец, если вам нужен этот инструмент, вы можете установить его напрямую через npm,
npm i spark-md5

Или скачайте прямо с гитхаба автора:


Категории