AJAX-----14HTML5中新增的API---files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function pics(){
var pic = document.getElementsByTagName('input')[0].files;
console.log(pic);
}
</script>
</head>
<body>
<input type="file" name="pic" onchange='pics();'>
</body>
</html>
查看下他是什么东西：
我们可以很清晰看到我们上传的只是一个文件而已。。。。
那么我们再来深入玩玩。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function pics(){
var pic = document.getElementsByTagName('input')[0].files[0];
console.log(pic);
}
</script>
</head>
<body>
<input type="file" name="pic" onchange='pics();'>
</body>
</html>
效果如下：
这样我们就可以很详细的看到我们文件的具体内容是什么了。。。。。。
如果是做超大型文件上传的是靠如下方法：
要不断切割文件内容，切割成小块。。。
废话不多说来模拟一个上传的再说。。。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function selefile(){
//创建FormData对象
var fd = new FormData();
//获取文件对象
var pic = document.getElementsByTagName('input')[0].files[0];
//把文件内容追加到表单数据里
fd.append('pic',pic);
//创建xmlhttprequest对象
var xhr = new XMLHttpRequest();
//打开
xhr.open('POST','12.php',true);
//发送fd给后端
xhr.send(fd);
//接收
xhr.onreadystatechange = function(){
if(this.readyState == 4){
document.getElementById('desc').innerHTML = this.responseText;
}
}
}
</script>
</head>
<body>
<input type="file" name="pic" onchange="selefile();" >
<div id="desc"></div>
</body>
</html>
<?php
//print_r($_FILES); if(empty($_FILES)){
exit('No file');
} if($_FILES['pic']['error'] != 0){
exit('no file');
}
$picaddress = 'upload/'.time().rand();
move_uploaded_file($_FILES['pic']['tmp_name'],$picaddress.'.jpg');
echo 'OK';
效果如下所示：
AJAX-----14HTML5中新增的API---files的更多相关文章
- 第30月第11天 Xcode 9.0中新增的API版本检查@available
1.Xcode 9.0中新增的API版本检查@available https://www.jianshu.com/p/0a94baa6c3dd https://www.jianshu.com/p/b8 ...
- AJAX-----13HTML5中新增的API---FormData
FormData 表单数据对象,这是在HTML5中新增的一个API,他能以表单对象做参数,自动的将表单的数据打包,当ajax发送数据是,发送FormData内的表单数据给后端即可 <!DOCTY ...
- ASP.NET MVC4中调用WEB API的四个方法
http://tech.it168.com/a2012/0606/1357/000001357231_all.shtml [IT168技术]当今的软件开发中,设计软件的服务并将其通过网络对外发布,让各 ...
- Django使用AJAX调用自己写的API接口
Django使用AJAX调用自己写的API接口 *** 具体代码和数据已上传到github https://github.com/PythonerKK/eleme-api-by-django-rest ...
- $.ajax 跨域请求 Web Api
WepApi确实方便好用,没有配置文件,一个apicontroller直接可以干活了.但今天用$.ajax跨域请求的时候总是获取不到数据,用fiddler一看确实抓到了数据,但回到$.ajax函数中, ...
- 以短链服务为例，探讨免AppKey、免认证、Ajax跨域调用新浪微博API
新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...
- C#中调用Windows API的要点 .
介绍 API(Application Programming Interface),我想大家不会陌生,它是我们Windows编程的常客,虽然基于.Net平台的C#有了强大的类库,但是,我们还是不能否认 ...
- ionic 运行过程中动态切换API服务器地址
ionic 运行过程中动态切换API服务器地址 keywords: ionic,phonegap,cordova,网络制式,动态切换,变更,API,服务器地址,$resource,localstora ...
- 腾讯微博java(android)sdk新增微博api详细介绍
本文主要介绍腾讯微博android sdk中新增微博有关的8个接口,以及使用的示例代码 注意:以下所有的api示例代码都需要先新建QqTSdkService类对象qqTSdkService并初始化,见 ...
- Native Application 开发详解（直接在程序中调用 ntdll.dll 中的 Native API，有内存小、速度快、安全、API丰富等8大优点）
文章目录: 1. 引子: 2. Native Application Demo 展示: 3. Native Application 简介: 4. Native Ap ...
随机推荐
- 20145330《Java程序设计》第四次实验报告
20145330<Java程序设计>第四次实验报告 实验四 Android环境搭建 实验内容 1.搭建Android环境 2.运行Android 3.修改代码,能输出学号 实验步骤 搭建A ...
- C#中WinForm程序退出方法技巧总结（转）
本文实例总结了C#中WinForm程序退出方法技巧.分享给大家供大家参考.具体分析如下: 在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit ...
- 64位虚拟机安装64位ubuntu出现问题
virtualbox 出现this kernel requires an an x86-64 cpu 错误 如题,但是主机是win8 64位,使用virtualbox安装ubuntu-12.04.3- ...
- jQuery库中的变量$和其它类库的变量$冲突解决方案
jQuery.noConflict();//把变量$给其它插件 /* 由于把jQuery插件中的变量$给了其它插件使用 那么在调用jQuery插件的时候只能使用jQuery 但是这样很不方便 1.其实 ...
- SVN 的安装与配置
1.下载subclipse1.6的site包 2.把这个site-1.6.2解压开,将其内部的文件,全部放到 C:\Program Files\MyEclipse\MyEclipse 9\dropin ...
- C#_项目做成安装包
首先打开项目-->点开解决方案右键单击添加-->新建项目-->找到其他项目类型(如下图)--> 点击确定-->单击应用程序文件夹-->在名称下的空白处单击--> ...
- 房间安排-nyoj168
描述 2010年上海世界博览会(Expo2010),是第41届世界博览会.于2010年5月1日至10月31日期间,在中国上海市举行.本次世博会也是由中国举办的首届世界博览会.上海世博会以“城市,让生活 ...
- 使用ImageCreate()创建一个代表空白图像的变量
在建立图像创建环境之前,还需要做一些准备工作.首先,安装t1lib接着安装jpeg-6b,然后再安装GD库文件.在安装时一定要按这里给定的顺序进行安装,因为在编译GD入库时会用到jpeg-6b,如果没 ...
- java.io包中的字节流—— FilterInputStream和FilterOutputStream
接着上篇文章,本篇继续说java.io包中的字节流.按照前篇文章所说,java.io包中的字节流中的类关系有用到GoF<设计模式>中的装饰者模式,而这正体现在FilterInputStre ...
- 杭电ACM 1178
#include<stdio.h>#include<string.h>#include<math.h>#include<ctype.h>#include ...