Rumah hujung hadapan web tutorial js 怎么用ajax如何实现大文件上传的功能

怎么用ajax如何实现大文件上传的功能

Mar 30, 2018 pm 05:04 PM
ajax capai dokumen

这次给大家带来怎么用ajax如何实现大文件上传的功能,用ajax实现大文件上传的注意事项有哪些,下面就是实战案例,一起来看一下。

大家都知道php上传文件有限制,如果没有修改过php.ini文件的话,默认的上传大小限制为2M,那么该如何上传大文件了,比如说上传一个1G多的大文件,可以使用大文件切割上传的方式来解决。

何为大文件切割上传?

原理:利用HTML5的新特性,将文件内容切割成分段的二进制信息,然后每次向服务器上传一段,而服务器,只需要把我们每次上传的二进制信息整合存储到一个文件中,那么最后这个文件就是所上传的文件。

由于php.ini默认的上传大小为2M,如果每批都上传2M,我测试的时候时间比较长,这里我将其限制大小该为20M,最大post数据为28M,便于测试。如果实际开发中不能修改其参数,则每批上传的数据不能超过最大限制。

post_max_size = 28M 
upload_max_filesize = 20M
Salin selepas log masuk

我的是在nginx里面上传所以还需要修改Nginx配置文件/etc/nginx/nginx.con

//在http{} 里面加即可 
client_max_body_size 50m   #客户端最大上传大小 50M
Salin selepas log masuk

JavaScript中的File对象

在之前的文章中我们已经使用到了这个Api,File对象中保存了文件的大小、名称、类型等信息

JavaScript中的Blob对象

Blob对象是二进制对象,也是File对象的父类,Blob对象中有一个很重要的方法:slice() 方法,利用这个方法我们可以把文件内容切割成二进制信息。slice() 方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。

上传页面index.php:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <title>大文件切割上传</title> 
  <link rel="stylesheet" href=""> 
  <script> 
    function selfile(){ 
      const LENGTH = 1024 * 1024 * 10;//每次上传的大小 
      var file = document.getElementsByName('video')[0].files[0];//文件对象 
      var filename=document.getElementsByName('video')[0].files[0].name; 
      var totalSize = file.size;//文件总大小 
      var start = 0;//每次上传的开始字节 
      var end = start + LENGTH;//每次上传的结尾字节 
      var fd = null//创建表单数据对象 
      var blob = null;//二进制对象 
      var xhr = null;//xhr对象 
      while(start < totalSize){ 
        fd = new FormData();//每一次需要重新创建 
        xhr = new XMLHttpRequest();//需要每次创建并设置参数 
        xhr.open(&#39;POST&#39;,&#39;upload.php&#39;,false); 
        blob = file.slice(start,end);//根据长度截取每次需要上传的数据 
        fd.append(&#39;video&#39;,blob);//添加数据到fd对象中 
        fd.append(&#39;filename&#39;,filename); //获取文件的名称 
        xhr.send(fd);//将fd数据上传 
 
        //重新设置开始和结尾 
        start = end; 
        end = start + LENGTH; 
 
      } 
 
    } 
  </script> 
</head> 
<body> 
<h1>大文件切割上传</h1> 
<input type="file" name="video" onchange="selfile();" /> 
</body> 
</html>
Salin selepas log masuk

接收数据页面upload.php:

<?php 
/** 
 * 大文件切割上传,把每次上传的数据合并成一个文件 
 */ 
 
$filename = &#39;./uploads/&#39;.$_POST[&#39;filename&#39;];//确定上传的文件名 
//第一次上传时没有文件,就创建文件,此后上传只需要把数据追加到此文件中 
if(!file_exists($filename)){ 
 move_uploaded_file($_FILES[&#39;video&#39;][&#39;tmp_name&#39;],$filename); 
}else{ 
 file_put_contents($filename,file_get_contents($_FILES[&#39;video&#39;][&#39;tmp_name&#39;]),FILE_APPEND); 
} 
?>
Salin selepas log masuk

测试之前,先创建uploads文件夹

如果是linux系统的话 切记给uploads给权限

sudo chmod -R 777 uoloads/  //赋予uploads文件夹 777 权限  -R 递归子文件
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样用Ajax异步检查用户名有无重复

ajax获取json数据为undefined应该如何使用

Atas ialah kandungan terperinci 怎么用ajax如何实现大文件上传的功能. 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

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

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)

Bagaimana untuk memindahkan fail dari Cakera Awan Quark ke Cakera Awan Baidu? Bagaimana untuk memindahkan fail dari Cakera Awan Quark ke Cakera Awan Baidu? Mar 14, 2024 pm 02:07 PM

Quark Netdisk dan Baidu Netdisk pada masa ini merupakan perisian Netdisk yang paling biasa digunakan untuk menyimpan fail Jika anda ingin menyimpan fail dalam Quark Netdisk ke Baidu Netdisk, bagaimana anda melakukannya? Dalam isu ini, editor telah menyusun langkah tutorial untuk memindahkan fail dari komputer Quark Network Disk ke Baidu Network Disk Mari kita lihat cara mengendalikannya. Bagaimana untuk menyimpan fail dari Cakera Rangkaian Quark ke Cakera Rangkaian Baidu? Untuk memindahkan fail daripada Cakera Rangkaian Quark ke Cakera Rangkaian Baidu, anda perlu memuat turun fail yang diperlukan terlebih dahulu daripada Cakera Rangkaian Quark, kemudian pilih folder sasaran dalam klien Cakera Rangkaian Baidu dan bukanya. Kemudian, seret dan lepaskan fail yang dimuat turun daripada Cakera Awan Quark ke dalam folder yang dibuka oleh klien Cakera Awan Baidu, atau gunakan fungsi muat naik untuk menambah fail pada Cakera Awan Baidu. Pastikan anda menyemak sama ada fail telah berjaya dipindahkan dalam Cakera Awan Baidu selepas muat naik selesai. Itu sahaja

Apa yang perlu dilakukan jika kod ralat 0x80004005 muncul Editor akan mengajar anda cara menyelesaikan kod ralat 0x80004005. Apa yang perlu dilakukan jika kod ralat 0x80004005 muncul Editor akan mengajar anda cara menyelesaikan kod ralat 0x80004005. Mar 21, 2024 pm 09:17 PM

Apabila memadam atau menyahmampat folder pada komputer anda, kadangkala kotak dialog segera "Ralat 0x80004005: Ralat Tidak Ditentukan" akan muncul Bagaimana anda harus menyelesaikan situasi ini? Sebenarnya terdapat banyak sebab mengapa kod ralat 0x80004005 digesa, tetapi kebanyakannya disebabkan oleh virus. Kami boleh mendaftarkan semula dll untuk menyelesaikan masalah tersebut . Sesetengah pengguna digesa dengan kod ralat 0X80004005 apabila menggunakan komputer mereka Ralat 0x80004005 disebabkan terutamanya oleh komputer tidak mendaftarkan fail perpustakaan pautan dinamik tertentu dengan betul, atau oleh tembok api yang tidak membenarkan sambungan HTTPS antara komputer dan Internet. Jadi bagaimana pula

Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Mar 24, 2024 am 11:27 AM

Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak

Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan? Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan? Mar 15, 2024 am 09:49 AM

Baru-baru ini, ramai netizen bertanya kepada editor, apakah itu fail hiberfil.sys? Bolehkah hiberfil.sys mengambil banyak ruang pemacu C dan dipadamkan? Editor boleh memberitahu anda bahawa fail hiberfil.sys boleh dipadamkan. Mari kita lihat butiran di bawah. hiberfil.sys ialah fail tersembunyi dalam sistem Windows dan juga fail hibernasi sistem. Ia biasanya disimpan dalam direktori akar pemacu C, dan saiznya bersamaan dengan saiz memori yang dipasang sistem. Fail ini digunakan apabila komputer sedang hibernasi dan mengandungi data memori sistem semasa supaya ia boleh dipulihkan dengan cepat kepada keadaan sebelumnya semasa pemulihan. Oleh kerana saiznya adalah sama dengan kapasiti memori, ia mungkin mengambil jumlah ruang cakera keras yang lebih besar. hiber

Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Mar 24, 2024 pm 06:03 PM

Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.

Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci Mar 20, 2024 pm 04:54 PM

Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan

Kuasai cara Golang mendayakan kemungkinan pembangunan permainan Kuasai cara Golang mendayakan kemungkinan pembangunan permainan Mar 16, 2024 pm 12:57 PM

Dalam bidang pembangunan perisian hari ini, Golang (bahasa Go), sebagai bahasa pengaturcaraan yang cekap, ringkas dan sangat bersesuaian, semakin digemari oleh pembangun. Perpustakaan standardnya yang kaya dan ciri-ciri konkurensi yang cekap menjadikannya pilihan berprofil tinggi dalam bidang pembangunan permainan. Artikel ini akan meneroka cara menggunakan Golang untuk pembangunan permainan dan menunjukkan kemungkinan besarnya melalui contoh kod tertentu. 1. Kelebihan Golang dalam pembangunan permainan Sebagai bahasa yang ditaip secara statik, Golang digunakan dalam membina sistem permainan berskala besar.

Panduan Pelaksanaan Keperluan Permainan PHP Panduan Pelaksanaan Keperluan Permainan PHP Mar 11, 2024 am 08:45 AM

Panduan Pelaksanaan Keperluan Permainan PHP Dengan populariti dan perkembangan Internet, pasaran permainan web menjadi semakin popular. Ramai pembangun berharap untuk menggunakan bahasa PHP untuk membangunkan permainan web mereka sendiri, dan melaksanakan keperluan permainan adalah langkah utama. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk melaksanakan keperluan permainan biasa dan menyediakan contoh kod khusus. 1. Cipta watak permainan Dalam permainan web, watak permainan adalah elemen yang sangat penting. Kita perlu mentakrifkan atribut watak permainan, seperti nama, tahap, nilai pengalaman, dll., dan menyediakan kaedah untuk mengendalikannya

See all articles