使用JQuery文件上传上传文件前校验和md5

Question

我正在使用https://github.com/blueimp/jQuery-File-Upload lib 将文件上传到服务器。但在此之前，我想校验和 md5 以发送 AJAX 请求以检查重复文件。那么有什么方法可以在上传之前校验文件的MD5。谢谢和最好的问候。

Answer 1

总结：

• 在 'add' 部分添加 spark-md5 代码，然后调用 data.submit() - 这会启动上传。
• 您还可以执行其他操作，例如文件大小检查等。

我的堆栈：

• Multer 在我的 Node.js 中（你可以使用其他东西）：github.com/expressjs/mutter
• blueimp：npmjs.com/package/blueimp-file-upload
• spark-md5 用于 MD5 检查：npmjs.com/package/spark-md5
• 来自演示页面的代码：9px.ir/demo/incremental-md5.html

控制台日志结果：

uploading adobe_flash_setup_0906278883.exe 4522ae4ce9ee143b5b18dfa4a51b01b6
file name: adobe_flash_setup_0906278883.exe (1,518,959 bytes)
read chunk number 1 of 1
finished loading :)
computed hash: 3f38a0468b52a38c34385201de4746b0
placeholder call for data.submit();

在我的<script> 标签之前：

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/vendor/jquery.ui.widget.js"></script>
<script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.iframe-transport.js"></script>
<script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.fileupload.js"></script>
<script src="https://unpkg.com/spark-md5@3.0.0/spark-md5.min.js"></script>

在我的<script> 标签上：

      $('#fileupload').fileupload({
                  url: 'https://mywebsite/blahblahblahblahblah',
                  paramName: '_file',
                  dataType: 'json',
                  type: 'POST',
                  autoUpload: true,
                  add: function(e, data) {
                      console.log('uploading', data.files[0].name, _hashID);


                      var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
                          file = data.files[0],
                          chunkSize = 2097152, // read in chunks of 2MB
                          chunks = Math.ceil(file.size / chunkSize),
                          currentChunk = 0,
                          spark = new SparkMD5.ArrayBuffer(),
                          frOnload = function(e) {
                              console.log("\nread chunk number " + parseInt(currentChunk + 1) + " of " + chunks);
                              spark.append(e.target.result); // append array buffer
                              currentChunk++;
                              if (currentChunk < chunks)
                                  loadNext();
                              else
                                  console.log("\nfinished loading :)\n\ncomputed hash:\n" + spark.end());
                              console.log("placeholder call for data.submit();")
                              data.submit();
                          },
                          frOnerror = function() {
                              console.log("\noops, something went wrong.");
                          };

                      function loadNext() {
                          var fileReader = new FileReader();
                          fileReader.onload = frOnload;
                          fileReader.onerror = frOnerror;
                          var start = currentChunk * chunkSize,
                              end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
                          fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
                      };
                      console.log("file name: " + file.name + " (" + file.size.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ',') + " bytes)\n");
                      loadNext();
                  },
                  progress: function (e, data) {
                      // usual stuff
                  },
                  done: function (e, data) {
                      // usual stuff
                  }