html5ajax上传文件
㈠ 如何用ajax上传文件
用到两个对象
第一个对象：FormData
第二个对象：XMLHttpRequest
目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹....
有了这两个对象，我们可以真正的实现Ajax方式上传文件。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上传文件</title>
<script type="text/javascript">
function UpladFile() {
var fileObj = document.getElementByIdx_x_x("file").files[0]; // 获取文件对象
var FileController = "../file/save"; // 接收上传文件的后台地址
// FormData 对象
var form = new FormData();
form.append("author", "hooyes"); // 可以增加表单数据
form.append("file", fileObj); // 文件对象
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function () {
alert("上传完成!");
};
xhr.send(form);
}
</script>
</head>
<body>
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
</body>
</html>
很简洁的代码，便可以达到Ajax方式上传文件，上面的代码中使用<input type="file" />这种传统的选择文件的方法产生文件对象，HTML5还支持使用多种更灵活的方式，如拖拽文件到指定的元素上产生。
㈡ html5+websocket上传文件问题
websocket目前只支持文本，不支持二进制数据。上传多个文件，用 <input type="file"> 结合 ajax 的 POST 足够了
㈢ 基于HTML5的多图Ajax上传的php后台接收并获取图片宽高等信息
//但是为什么我用file_exists()判断文件是否存在时，得到的结果却是不存在呢
这句话后面加一句
$file='../uploads/' . $file;
你都把文件存成这个文件了 还用原来的文件名判断能行吗
后面的错误也是一样的
也可以直接把后面两个$file改掉
if(!file_exists('../uploads/' . $file)){
$src_info = @getimagesize('../uploads/' . $file);
㈣ 如何实现HTML5文件断点续传
实现HTML5文件断点续传
一、实现文件多选
HTML5的<input>新增了"multiple"属性，该属性可接受多个值的文件上传字段
<input type="file" multiple="multiple" name="file" id="file">
添加了该属性用户就可以在弹出的对话框中一次性选择多个文件了
二、实现文件从计算机拖拽到网页以及添加文件队列功能
这里我们用 dragover 和 drop 两个事件来管理文件拖拽的功能
其中 dragover 用来处理在指定的元素上移动时的事件，这里我们通过给body绑定dragover时间来处理页面中拖动文件的事件
document.body.addEventListener('dragover', dragFile, false);
function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = '';
}
用 drop 事件来处理鼠标松开时候的事件，此时应该将用户拖动过来的文件加入到上传队列中，以供后续的处理
document.body.addEventListener('drop', dropFile, false);
function dragFile(evt) {
evt.stopPropagation();
evt.preventDefault();
// dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。
// 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
var files = evt.dataTransfer.files;
// addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用
// 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令
addfile(files);
}
三、文件续传原理
目前比较常用的断点续传的方法有两种，一种是通过websocket接口进行文件上传，另一种是通过ajax，两种方法各有千秋，虽然websocket听起来比较高端些~ 但是除了用了不同的协议外其他的算法基本上都是很相似的，并且服务端要开启ws接口，这里用相对方便的ajax来说明断点上传的思路。
说来说去，断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器，但是这看似简单的上传过程却有着无数的坑。
首先是文件的识别，一个文件被分成了若干份之后如何告诉服务器你切了多少块，以及最终服务器应该如何把你上传上去的文件进行合并，这都是要考虑的。
因此在文件开始上传之前，我们和服务器要有一个“握手”的过程，告诉服务器文件信息，然后和服务器约定切片的大小，当和服务器达成共识之后就可以开始后续的文件传输了。
前台要把每一块的文件传给后台，成功之后前端和后端都要标识一下，以便后续的断点。
当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分，如果是的话，那么我们可以接着上次的进度继续传文件，以达到续传的功能。
四、文件的前端切片
有了HTML5 的 File api之后切割文件比想想的要简单的多的多。
只要用slice 方法就可以了
var packet = file.slice(start, end);
参数start是开始切片的位置，end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块
如
file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......
五、文件片段的上传
上一部我们通过slice方法把文件分成了若干块，接下来要做的事情就是把这些碎片传到服务器上。
这里我们用ajax的post请求来实现
textpop-up
var xhr = new XMLHttpRequest();
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理
xhr.open('POST', url, true);
xhr.onload = function (e){
// 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快
}
xhr.upload.onprogress = function(e){
// 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度
// e.loaded 该片文件上传了多少
// e.totalSize 该片文件的总共大小
}
xhr.send(packet);
㈤ 前端上传文件的几种方法
1.表单上传
最传统的图片上传方式是form表单上传，使用form表单的input[type=”file”]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。
form表单上传
表单上传需要注意以下几点：
(1).提供form表单，method必须是post。
(2).form表单的enctype必须是multipart/form-data。
javascript学习交流群：453833554
enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码。HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：
application/x-www-form-urlencoded：在发送前编码所有字符(默认)(空格被编码为’+’，特殊字符被编码为ASCII十六进制字符)。
multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain：空格转换为 “+” 加号，但不对特殊字符编码。
默认enctype=application/x-www-form-urlencoded，所以表单的内容会按URL规则编码，然后根据表单的提交方法：
method=’get’ 编码后的表单内容附加在请求连接后，
method=’post’ 编码后的表单内容作为post请求的正文内容。
㈥ 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
});
希望能帮到你，如果满意，请记得采纳哦~~~
㈦ ajax 不能传输图片数据吗
ajax不是新技术，是多种技术的杂种，iframe，flash都可以上传文件，所以说，ajax是可以上传文件滴！
㈧ jquery升级后,上传的文件无效
升级后文件类型不匹配，无法上传。
在 IE8/9 中使用 JQuery 上传只能使用 Form 的方式。
使用 JQuery.Ajax 无法上传文件（因为无法使用 FormData，FormData 是 HTML5 的一个特性，IE8/9 不支持）
使用 JQuery Form 上传，contentType 只能为 text/html，因为如果是 application/json 类型，IE8/9 会以文件下载的方式展现 json 数据。
㈨ 哪个javascript框架支持ajax方式的文件上传
7款基于JavaScript和AJAX的文件上传插件，这些插件基本上都能实现以下功能：
多文件上传，拖拽操作，实时上传进度，自定义上传限制
1. jQuery File Upload
具有多文件上传、拖拽、进度条和图像预览功能的文件上传插件，支持跨域、分块、暂停恢复和客户端图像缩放。可与任何服务端平台（如PHP、Python、Ruby on Rails、Java、Node.js、Go等）一起使用，支持标准的HTML表单文件上传。
2. Pixelcone Fileuploader
使用HTML5 API的jQuery文件上传插件，支持AJAX上传和拖拽操作，以及针对老版本浏览器的iframe上传部件。有多种形式来实现多文件上传，每种形式由单一的上传脚本来控制。
3. Ajax Upload
该插件使用XHR来上传多个文件，支持拖拽操作，可以在FF3.6+、Safari4+、Chrome等浏览器中完美运行。
4. Plupload
这是一个针对CMS或类似系统的、高度可用的上传插件。支持分块、拖拽、图像缩放、限制文件大小、显示上传进度等。
5. Uploadify
Uploadify是一个jQuery插件，帮助你在网站中轻松添加多文件上传功能，提供了两个版本（HTML5、Flash）。支持多文件上传、拖拽、实时进度显示，提供了大量的定制功能。
6. Ajax File Upload
该插件是Ajaxupload插件的修改版本，不具备HTML5功能。
7. jQuery FileDrop
该插件使用HTML5 API，允许用户从桌面拖动多个文件到浏览器中，并上传每个文件到用户指定的URL。该插件使用HTML5 FileReader()来读取文件数据。
㈩ 你好，构造FormData 上传文件（用html5分块了的）用ajax提交数据（不用jquery），服务器端怎么读取数据啊
AJAX上传的是POST方式，记得加上multipart/form-data