16.关于 file API 和 formdata

1. 上一节中: $(‘#file‘)[0].files[0]。 写法不是很懂

参考 : https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Using the File API, which was added to the DOM in HTML5, it‘s now possible for web content to ask the user to select local files and then read the contents of those files. This selection can be done by either using an HTML <input> element or by drag and drop.

Accessing selected file(s)EDIT
Consider this HTML:

<input type="file" id="input">
The File API makes it possible to access a FileList containing File objects representing the files selected by the user.

If the user selects just one file, it is then only necessary to consider the first file of the list.

Accessing one selected file using a classical DOM selector:

var selectedFile = document.getElementById(‘input‘).files[0];
Accessing one selected file using a jQuery selector:

var selectedFile = $(‘#input‘).get(0).files[0];

var selectedFile = $(‘#input‘)[0].files[0];

2.

Formdata的构造函数:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData

参数

form 可选,一个HTML 上的<form>表单元素——这种方式创建的FormData对象会自动将form中的表单值也包含进去,包括文件内容也会被编码之后包含进去。
php利用 name = file 来查询就可以
3. chrome console.log 太好用
时间: 2024-10-22 07:57:52

16.关于 file API 和 formdata的相关文章

php 下 html5 XHR2 + FormData + File API 上传文件

FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>

XMLHttpRequest file API

XMLHttpRequest file API Table of Contents FormData file API jquery file api 上传文件 从 FormData 中新建图片 设置进度条 大文件切割 一些 XMLHttpRequest 2 的 API 相关阅读 FormData 使用 FormData 不需要 setRequestHeader("content-type", "application/x-www-form-urlencoded")

通过Canvas及File API缩放并上传图片完整示例

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>通过Canvas及File API缩放并上传图片</title> 5 <meta http-equiv="pragma" content="no-cache"> 6 <meta http-equiv="cache-control" content="no-cache&qu

HTML5 File API解读

1,概述 Web应用应该具备处理广泛用户输入问题的能力,例如在Web富应用中,用户希望上传文件到服务器.File API定义了访问文件的基本操作途径,包括文件.文件列表集.错误处理等,同时,File API还定义了描述文件异步处理进程中的一些元数据.接下来,我们一起看看File的应用. 2,FileList接口 接口描述: 1 interface FileList { 2 getter File? item(unsigned long index); 3 readonly attribute u

javascript 使用Html5 File Api进行文件读取

javascript 使用Html File Api进行文件读取,注意"读取"是只读不写,不可以主动获取浏览器所在主机的文件列表. Html5 中 FileApi主要有 FileUpload, File,FileList,FileError,Blob,FileReader,DataTransfer. 这里主要测试File.因此有必要给一个 test target <form action="javascript:void(0)" method="po

HTML5 File API — 拖拽显示

1.HTML5拖拽 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 如果是html中的元素,要进行拖动,需要设置draggable为true. 下面的代码显示了img在两个div里任意拖动. 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style type="text/css"> 5 #div1, #div2 6 {float:left; width:100px; height:35px;

Java NIO2 File API介绍

[译]Java NIO2 File API介绍 1.概览 在这篇文章中,我们要关注的是使用Java平台的NIO(译者注: NIO意即New I/O)的APIs----NIO2----用来对文件做一些基础的操作. File APIs in NIO2 constitute one of the major new functional areas of the Java Platform that shipped with Java 7, specifically a subset of the n

file API+JCrop 选择、裁剪并上传头像

file API,直接读取本地文件,绕过了后台处理再返回前台的过程,使编程更简单.fileAPI和JCrop的结合使用上传头像. 1.html部分 <input id="demo" type="file" onchange="showPic();"/> <img id="avatar" src=""> 2.fileAPI预览图片(jquery) <script type=&qu

通过 File API 使用 JavaScript 读取文件

原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小. 该规范通过“本地”文件系统提供了多种文件访