最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

HTML5中文件上传的代码

来源:动视网 责编:小采 时间:2020-11-27 15:04:48
文档

HTML5中文件上传的代码

HTML5中文件上传的代码:这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助。XHR2上传二进制文件html代码:<input type="file" onchange="handleUpload()"&
推荐度:
导读HTML5中文件上传的代码:这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助。XHR2上传二进制文件html代码:<input type="file" onchange="handleUpload()"&


这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助。

  1. XHR2上传二进制文件

html代码:

<input type="file" onchange="handleUpload()">

javascript代码:

function handleUpload(){
 var file = document.querySelector('input[type=file]').files[0]; 
 if(!!file) { 
 var reader = new FileReader(); // 读取文件二进制
 reader.readAsArrayBuffer(file);
 reader.onload = function() {
 upload(this.result, file.name);
 }
 }
}function upload(binary, filename){
 var xhr = new XMLHttpRequest(); // 通过post发送二进制数据,文件信息拼接在url
 xhr.open('POST', './upload.php?filename=' + filename);
 xhr.overrideMimeType("application/octet-stream"); 
 if(xhr.sendAsBinary) {
 xhr.sendAsBinary(binary);
 }else {
 xhr.send(binary);
 }

 xhr.onload = function() {
 var res = JSON.parse(xhr.response); 
 if(res.status === 'success') {
 alert('上传成功');
 }else {
 alert('上传失败');
 }
 }
}

php代码:

<?php
$result = new stdClass();
$fileName = $_GET['filename'];
$filePath = './document/';
function binary_to_file($fileName){
 // 获取二进制数据
 $content = file_get_contents('php://input'); 
 if(empty($content)) { 
 $content = $GLOBALS['HTTP_RAW_POST_DATA'];
 } 
 $res = file_put_contents($GLOBALS['filePath'] . $fileName, $content, true); 
 return $res;
}if(binary_to_file($fileName) === FALSE) { 
$result->status = 'error';
}else { 
$result->status = 'success';
}echo json_encode($result);

2.HTML5 大文件分片上传

javascript代码:

const LENGTH = 10*1024; // 每次上传10kbvar file,
 chunks = [],
 index = 1, // 当前上传块
 total; // 总块数function handleUpload() {
 file = document.querySelector('[type=file]').files[0];
 total = Math.ceil(file.size / LENGTH); for(var i = 0; i < total; i++) {
 chunks[i] = file.slice(i*LENGTH, (i+1)*LENGTH);
 }

 upload(chunks, index, total, polling);
}function upload(chunks, index, total, callback) {
 var xhr = new XMLHttpRequest(),
 chunk = chunks[index - 1],
 formData = new FormData(); // 表单对象
 formData.append('file', chunk);
 formData.append('index', index);
 formData.append('total', total);
 formData.append('filename', file.name);

 xhr.open('POST', './upload.php');
 xhr.send(formData);

 xhr.onload = function() {
 var res = JSON.parse(xhr.response); if(typeof callback == 'function') {
 callback.call(this, res, chunks, index, total);
 }
 }
}function polling(res, chunks, index, total){
 if(res.isFinish) {
 alert('上传成功')
 }else {
 console.log(res.progress);
 upload(chunks, index + 1, total, polling);
 }
}

php代码:

文件上传类 FileUpload.php

<?php

class FileUpload
{ 
private $index; 
private $total; 
private $filename; 
private $filePath = './document/'; 
private $file; 
private $tmpFile; // 临时文件

 function __construct($tmpFile, $index, $total, $filename)
 {
 $this->index = $index;
 $this->total = $total;
 $this->filename = $filename;
 $this->tmpFile = $tmpFile;

 $this->move_file();
 } /**
 * 创建文件夹
 * @return bool
 */
 public function touch_dir()
 { if(!file_exists($this->filePath)) { 
 return mkdir($this->filePath);
 }
 } /**
 * 移动文件
 */
 public function move_file()
 {
 $this->touch_dir();
 $this->file = $this->filePath . $this->filename . '_' . $this->index;
 move_uploaded_file($this->tmpFile, $this->file);
 } /**
 * 合并文件
 */
 public function merge_file()
 { if($this->index == $this->total) {
 $mergeFile = $this->filePath . $this->filename; 
 for($i = 1; $i <= $this->total; $i++) {
 $chunk = file_get_contents($mergeFile.'_'.$i);
 file_put_contents($mergeFile, $chunk, FILE_APPEND);
 }
 $this->del_file();
 }
 } /**
 * 删除文件
 */
 public function del_file()
 { for($i = 1; $i <= $this->total; $i++) {
 $delFile = $this->filePath . $this->filename. '_' . $i; 
 @unlink($delFile);
 }
 } /**
 * 结果返回
 * @return stdClass
 */
 public function getReturn()
 {
 $result = new stdClass(); 
 if($this->index == $this->total) {
 $result->isFinish = TRUE;
 $this->merge_file();
 }else {
 $result->progess = ($this->index / $this->total);
 } return $result;
 }
}

接口调用upload.php

<?php
require './FileUpload.php';
$fileUpload = new FileUpload($_FILES['file']['tmp_name'], 
$_POST['index'], 
$_POST['total'], 
$_POST['filename']);
$result = $fileUpload->getReturn();
echo json_encode($result);

相关文章推荐:

css box-sizing属性(盒子模型)的用法介绍

html5中video(视频)元素的分析

HTML5实现魔方游戏的代码

文档

HTML5中文件上传的代码

HTML5中文件上传的代码:这篇文章给大家分享的内容是关于HTML5中文件上传的代码,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助。XHR2上传二进制文件html代码:<input type="file" onchange="handleUpload()"&
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top