Rumah hujung hadapan web tutorial js 分享js-spark-md5使用教程

分享js-spark-md5使用教程

Jun 26, 2017 am 09:16 AM
javascript hujung hadapan berdasarkan cepat Perpustakaan kelas

js-spark-md5是歪果仁开发的东西,有点多,但是我们只要一个js文件即可,具体类包我存在自己的oschina上,下载地址:

js-spark-md5是做什么的?    js-spark-md5是号称全宇宙最快的前端类包,可以无需上传文件就快速获取本地文件md5.

可能你觉得这没什么,但是,当你做一个文件系统时候,就有这需求,用这个简单的前端类库就能实现你“秒传”的功能!这里我解释下,每个文件的md5值都是唯一的,这也是很多下载网站,会告诉你原文件的md5是多少,然后下载完毕让你自行去对比下,如果一致,就说明文件是完整的。

好了,正因为每个文件的md5是一样的,那么,我们在做文件上传的时候,就只要在前端先获取要上传的文件md5,并把文件md5传到服务器,对比之前文件的md5,如果存在相同的md5,我们只要把文件的名字传到服务器关联之前的文件即可,并不需要再次去上传相同的文件,再去耗费存储资源、上传的时间、网络带宽。

js-spark-md5使用教程:

1.先引入js类包

2.写文件表单

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form method="POST" enctype="multipart/form-data" onsubmit="return false;" >
    <input id=file type=file placeholder="select a file" />
</form>
<pre id=log>
<script>     var log=document.getElementById("log");     document.getElementById("file").addEventListener("change", function() {         var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,                 file = this.files[0],                 chunkSize = 2097152, // read in chunks of 2MB                 chunks = Math.ceil(file.size / chunkSize),                 currentChunk = 0,                 spark = new SparkMD5.ArrayBuffer(),                 frOnload = function(e){                   //  log.innerHTML+="\nread chunk number "+parseInt(currentChunk+1)+" of "+chunks;                     spark.append(e.target.result); // append array buffer                     currentChunk++;                     if (currentChunk < chunks) loadNext(); else log.innerHTML+="\n加载结束 :\n\n计算后的文件md5:\n"+spark.end()+"\n\n现在你可以选择另外一个文件!\n"; }, frOnerror = function () { log.innerHTML+="\糟糕,好像哪里错了."; }; 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));         };         loadNext();     }); </script>
Salin selepas log masuk

注意,spark.end()就是文件的md5值,文件引用顺序一定不能倒了,要不无法正常工作。

正常工作的截图:

本人博客:基于js-spark-md5前端js类库,快速获取文件Md5值


Atas ialah kandungan terperinci 分享js-spark-md5使用教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan Mar 16, 2024 pm 12:09 PM

PHP dan Vue: gandingan sempurna alat pembangunan bahagian hadapan Dalam era perkembangan pesat Internet hari ini, pembangunan bahagian hadapan telah menjadi semakin penting. Memandangkan pengguna mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk pengalaman tapak web dan aplikasi, pembangun bahagian hadapan perlu menggunakan alat yang lebih cekap dan fleksibel untuk mencipta antara muka yang responsif dan interaktif. Sebagai dua teknologi penting dalam bidang pembangunan bahagian hadapan, PHP dan Vue.js boleh dianggap sebagai alat yang sempurna apabila digandingkan bersama. Artikel ini akan meneroka gabungan PHP dan Vue, serta contoh kod terperinci untuk membantu pembaca memahami dan menggunakan kedua-dua ini dengan lebih baik.

Apakah perbezaan dalam laluan 'Komputer Saya' dalam Win11? Cara cepat untuk mencarinya! Apakah perbezaan dalam laluan 'Komputer Saya' dalam Win11? Cara cepat untuk mencarinya! Mar 29, 2024 pm 12:33 PM

Apakah perbezaan dalam laluan "Komputer Saya" dalam Win11? Cara cepat untuk mencarinya! Memandangkan sistem Windows sentiasa dikemas kini, sistem Windows 11 terkini turut membawakan beberapa perubahan dan fungsi baharu. Salah satu masalah biasa ialah pengguna tidak dapat mencari laluan ke "Komputer Saya" dalam sistem Win11 Ini biasanya merupakan operasi mudah dalam sistem Windows sebelumnya. Artikel ini akan memperkenalkan cara laluan "Komputer Saya" berbeza dalam sistem Win11, dan cara mencarinya dengan cepat. Dalam Windows1

Panduan Membina Laman Web WordPress: Membina Laman Web Peribadi dengan Cepat Panduan Membina Laman Web WordPress: Membina Laman Web Peribadi dengan Cepat Mar 04, 2024 pm 04:39 PM

Panduan Membina Laman Web WordPress: Cepat Membina Laman Web Peribadi Dengan kemunculan era digital, mempunyai laman web peribadi telah menjadi bergaya dan perlu. Sebagai alat pembinaan laman web yang paling popular, WordPress menjadikannya lebih mudah dan lebih mudah untuk membina tapak web peribadi. Artikel ini akan memberi anda panduan untuk membina laman web peribadi dengan cepat, termasuk contoh kod khusus, saya harap ia dapat membantu rakan-rakan yang ingin memiliki tapak web mereka sendiri. Langkah 1: Beli nama domain dan pengehosan Sebelum mula membina tapak web peribadi, anda mesti membeli sendiri

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Adakah Django bahagian hadapan atau belakang? semaklah! Adakah Django bahagian hadapan atau belakang? semaklah! Jan 19, 2024 am 08:37 AM

Django ialah rangka kerja aplikasi web yang ditulis dalam Python yang menekankan pembangunan pesat dan kaedah bersih. Walaupun Django ialah rangka kerja web, untuk menjawab soalan sama ada Django ialah front-end atau back-end, anda perlu mempunyai pemahaman yang mendalam tentang konsep front-end dan back-end. Bahagian hadapan merujuk kepada antara muka yang pengguna berinteraksi secara langsung, dan bahagian belakang merujuk kepada program bahagian pelayan Mereka berinteraksi dengan data melalui protokol HTTP. Apabila bahagian hadapan dan bahagian belakang dipisahkan, program bahagian hadapan dan bahagian belakang boleh dibangunkan secara bebas untuk melaksanakan logik perniagaan dan kesan interaktif masing-masing, dan pertukaran data.

Soalan yang sering ditanya oleh penemuduga front-end Soalan yang sering ditanya oleh penemuduga front-end Mar 19, 2024 pm 02:24 PM

Dalam temu bual pembangunan bahagian hadapan, soalan lazim merangkumi pelbagai topik, termasuk asas HTML/CSS, asas JavaScript, rangka kerja dan perpustakaan, pengalaman projek, algoritma dan struktur data, pengoptimuman prestasi, permintaan merentas domain, kejuruteraan bahagian hadapan, corak reka bentuk, dan teknologi dan trend baharu. Soalan penemuduga direka bentuk untuk menilai kemahiran teknikal calon, pengalaman projek dan pemahaman tentang trend industri. Oleh itu, calon harus bersedia sepenuhnya dalam bidang ini untuk menunjukkan kebolehan dan kepakaran mereka.

Meneroka teknologi bahagian hadapan bahasa Go: visi baharu untuk pembangunan bahagian hadapan Meneroka teknologi bahagian hadapan bahasa Go: visi baharu untuk pembangunan bahagian hadapan Mar 28, 2024 pm 01:06 PM

Sebagai bahasa pengaturcaraan yang pantas dan cekap, bahasa Go popular secara meluas dalam bidang pembangunan bahagian belakang. Walau bagaimanapun, beberapa orang mengaitkan bahasa Go dengan pembangunan bahagian hadapan. Malah, menggunakan bahasa Go untuk pembangunan bahagian hadapan bukan sahaja boleh meningkatkan kecekapan, tetapi juga membawa ufuk baharu kepada pembangun. Artikel ini akan meneroka kemungkinan menggunakan bahasa Go untuk pembangunan bahagian hadapan dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik bahagian ini. Dalam pembangunan front-end tradisional, JavaScript, HTML dan CSS sering digunakan untuk membina antara muka pengguna

Django: Rangka kerja ajaib yang boleh mengendalikan pembangunan bahagian hadapan dan belakang! Django: Rangka kerja ajaib yang boleh mengendalikan pembangunan bahagian hadapan dan belakang! Jan 19, 2024 am 08:52 AM

Django: Rangka kerja ajaib yang boleh mengendalikan pembangunan bahagian hadapan dan belakang! Django ialah rangka kerja aplikasi web yang cekap dan berskala. Ia mampu menyokong berbilang model pembangunan web, termasuk MVC dan MTV, dan boleh membangunkan aplikasi web berkualiti tinggi dengan mudah. Django bukan sahaja menyokong pembangunan bahagian belakang, tetapi juga boleh membina antara muka bahagian hadapan dengan cepat dan mencapai paparan paparan yang fleksibel melalui bahasa templat. Django menggabungkan pembangunan bahagian hadapan dan pembangunan bahagian belakang menjadi penyepaduan yang lancar, supaya pembangun tidak perlu pakar dalam pembelajaran

See all articles