HTML5与Ajax上传文件

2016-03-01

字数统计: 497字 | 阅读时长≈ 2分

iframe伪装，jQuery-uploaded-file插件

前台代码

<div>
	<h1>iframe模拟ajax上传文件效果</h1>
	<h2></h2>
	<form action='11-up.php' method='post' enctype='multipart/form-data' onsubmit='return ajaxUpload();'>
    	<p><input type='file' name='pic' /></p>
    	<p><input type='submit' value='提交' /></p>
	</form>
</div>

js代码

/*
分析：
  1. 捕捉表单提交动作(onsubmit="return ajaxUpload()")
  2. 创建iframe(jQuery直接创建$('<iframe></iframe>'))
  3. 把表单的target修改指向该iframe(target='framename')
  4. 去掉这个iframe()
*/
function ajaxUpload(){
    var ifname = 'up' + Math.random();
    $('<iframe name="'+ ifname +'" width="0" height="0" frameBorder="0"></iframe>').appendTo($('body'));
    $('form:first').attr('target', ifname);
}

PHP代码

if(empty($_FILES)){
	exit('no file');
}

$error = $_FILES['pic']['error'] == 0 ? 'succ' : 'fail';
    
echo "<script>parent.document.getElementsByTagName('h2')[0].innerHTML = '$error'</script>";

HTML5 Files API

files API Formdata
前台代码：

1	<input type='file' name='pic' onchange='selfile();' />

js代码：

function selfile(){
	//表单数据容器
	var fd = new FormData();
    //获取文件，文件列表`files`属性
	var pic = document.getElementsByTagName('input')[0].files[0];
    //附加数据到表单容器中
	fd.append('pic', pic);

	var xhr = new XMLHttpRequest();
	xhr.open('POST', './13-upfile.php', true);

	xhr.onreadystatechange = function(){
		if(this.readyState == 4){
			document.getElementById('debug').innerHTML = this.responseText;
		}
	}
	xhr.send();
}

PHP代码：

<?php 

// print_r($_FILES);

// sleep(3);

if(empty($_FILES)){
	exit('no file');
}

if ($_FILES['pic']['error']!=0) {
	exit('fail');
}

move_uploaded_file($_FILES['pic']['tmp_name'], 'upload/'.$_FILES['pic']['name']);

echo "ok";
?>

这里还只是用到了HTML5的文件上传API基础，有很多新特性值得花时间研究。
而我现在最缺的就是时间，论文需要加快速度。
后面还有找工作的事情，毕业季来了啊！！

蛋定！！！

本文作者： Linking
本文链接： https://linking.fun/2016/03/01/HTML5与Ajax上传文件/