当前位置:首页 » 文件传输 » html5文件上传
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

html5文件上传

发布时间: 2022-04-11 14:00:21

㈠ 如何html5分割上传实现超大文件无插件网页上传

//代码不支持IE 因为IE对HTML5支持不好$("#file").change(function(event) { var file = $("#file")[0].files[0]; PostFile(file,0); });function PostFile(file,i){ var name = file.name, //文件名 size = file.size, //总大小shardSize = 2 * 1024 * 1024, shardSize = 2 * 1024 * 1024,//以2MB为一个分片 shardCount = Math.ceil(size / shardSize); //总片数 if(i >= shardCount){ return; } //计算每一片的起始与结束位置 var start = i * shardSize, end = Math.min(size, start + shardSize); //构造一个表单,FormData是HTML5新增的 var form = new FormData(); form.append("data", file.slice(start,end)); //slice方法用于切出文件的一部分 form.append("lastModified", file.lastModified); //slice方法用于切出文件的一部分 form.append("name", name); form.append("total", shardCount); //总片数 form.append("index", i + 1); //当前是第几片 //Ajax提交 $.ajax({ url: "/test/AjaxFile", type: "POST", data: form, async: true, //异步 processData: false, //很重要,告诉jquery不要对form进行处理 contentType: false, //很重要,指定为false才能形成正确的Content-Type success: function(data){ if(data){ i = data++; var num = Math.ceil(i*100 / shardCount); $("#output").text(num+'%'); PostFile(file,i); } } }); }

㈡ html5超大文件上传如何实现

后端code
<?php

class Upload{
private $filepath = './upload'; //上传目录
private $tmpPath; //PHP文件临时目录
private $blobNum; //第几个文件块
private $totalBlobNum; //文件块总数
private $fileName; //文件名
private $md5FileName;

public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName, $md5FileName){
$this->tmpPath = $tmpPath;
$this->blobNum = $blobNum;
$this->totalBlobNum = $totalBlobNum;
$this->fileName = $this->createName($fileName, $md5FileName);
$this->moveFile();
$this->fileMerge();
}

㈢ 用HTML5方式上传文件403错误啥意思

403 Forbidden 解释:
Forbidden
You don't have permission to access / on this server.

403 Forbidden 是HTTP协议中的一个状态码(Status Code)。可以简单的理解为没有权限访问此站点。

你说上传文件时出现403错误,估计可能原因有以下:

在不允许写/创建文件的目录中执行了创建/写文件操作
你的网页脚本文件在当前目录下没有执行权限

㈣ jquery html5怎样把文件上传到文件夹

楼主你好!根据你的描述,让我来给你回答!

var fd = new FormData(document.getElementById("fileinfo"));

fd.append("CustomField", "This is some extra data");

$.ajax({

url: "stash.php",

type: "POST",

data: fd,

processData: false, // tell jQuery not to process the data

contentType: false // tell jQuery not to set contentType

});

希望能帮到你,如果满意,请记得采纳哦~~~

㈤ 用html5进行多文件上传的时候是一次性把所有已选择文件传到后台么

html传多个文件对前端来说是一股脑的提交,但是其实主要还是看后台是如何接收的。后台可以设置一次性接收的文件数据,文件大小等等。其实就和平时的上传下载是一样的。
以下载为例:下载的时候,比如用迅雷下载,你的本机是否可以选择并行下载、逐个下载还可以停止、继续下载。同样的,上传也是一个类似的过程,主要依靠服务器代码进行管理设置。本质上,是两个计算机之间相互传递数据流而已。
当然,在默认的时候,服务器是接收多个文件的,比如javaweb中struts2接收文件默认是接收完所有文件然后再操作的。

㈥ 怎样用html5实现拖拽上传文件

,首先要判断拖入的文件是否符合要求,包括图片类型、大小等,然后获取本地图片信息,实现预览,最后上传。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽区域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
return false;
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是图片!");
return false;
}

//拖拉图片到浏览器,可以实现预览功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //图片名称
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize>500){
alert("上传大小不能超过500K.");
return false;
}
var str = "<img src='"+img+"'><p>图片名称:"+filename+"</p><p>大小:"+filesize+"KB</p>";
$("#preview").html(str);

//上传
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var fd = new FormData();
fd.append('mypic', fileList[0]);

xhr.send(fd);
},false);
});

㈦ html5可以通过路径上传文件么

这个当然可以 只需要有合适的插件支持即可

㈧ 如何使用html5的FileApi上传大文件

根本不需要那么麻烦,装一个扩展就实现了,代码都不用写。
AetherUpload-Laravel提供超大文件上传的Laravel扩展包,支持分组配置、断线续传、秒传等功能,简单易用,满足多数人的主流需求,无需编写适配代码,几乎开箱即用。

㈨ html5文件上传实现进度条需要后端吗

不需要后端的,前端自己判断,代码如下:
function uploadFile(){

// 获取上传文件,放到 formData对象里面
var pic = $("#myhead").get(0).files[0];
var formData = new FormData();
formData.append("file" , pic);
$.ajax({
type: "POST",
url: "upload",
data: formData ,//这里上传的数据使用了formData 对象
processData : false,
//必须false才会自动加上正确的Content-Type
contentType : false ,

//这里我们先拿到jQuery产生的 XMLHttpRequest对象,为其增加 progress 事件绑定,然后再返回交给ajax使用
xhr: function(){
var xhr = $.ajaxSettings.xhr();
if(onprogress && xhr.upload) {
xhr.upload.addEventListener("progress" , onprogress, false);
return xhr;
}
}
});