1.传统的web开发文件上传一般是基于form表单的文件上传，同步的方式，用户体验差，可控性也差
2.异步上传的实现 有以下方式
2.1 借助浏览器插件 一般需要安装一些类似flash的插件 这种方式 缺点：需要安装插件 优点：可控性强，性能高
2.2 这种是伪异步上传，借助表单向隐藏的iframe提交，然后通过iframe通信操作当前页面 这种方式可控行查，体验一般，见下面代码
2.3 借助html5 里的 FormData 对象，可实现进度控制，异步的上传方式，见代码
iframe方式的伪异步上传
up.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<form method="post" action="doup.php" enctype="multipart/form-data" target="up_file">
姓名：<input name="user" type="text"><br>
文件:<input type="file" name="ff"><br>
<input type="submit" value="提交">
</form>
<iframe name="up_file" style="display: none"></iframe>
<div id="res"></div>
</body>
</html>
提交处理程序代码 doup.php
<?php
if($_FILES){
$f=$_FILES[‘ff‘];
$tmp_name=$f[‘tmp_name‘];
if($f[‘error‘]===0){
if(is_uploaded_file($tmp_name)){
$file_arr=pathinfo($f[‘name‘]);
//防止特殊文件名
if(!is_dir(‘./upfile‘)) mkdir(‘./upfile‘,0755);
$dst_file=‘./upfile/‘.time()."-".substr(md5($file_arr[‘filename‘]),0,5).".".$file_arr[‘extension‘];
$o=move_uploaded_file($tmp_name,$dst_file);
if($o){
$html=<<<E
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
var parent=window.parent.document;
var img="<img src=‘$dst_file‘ style=‘width:200px;height:200px;‘>";
$(‘#res‘,parent).html(img);
</script>
E;
echo $html;
}else{
echo 0;
}
}
}
}
后端处理
借助FormData实现真的可控行异步上传
up1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
文件:<input type="file" name="myfile" id="myfile"><br>
<p id="upbtn">
<input type="button" value="异步上传" onclick="upload()">
<span id="uptext" style="display: none">正在上传</span>
<span id="tip"></span>
<button id="stopbtn" style="display: none">停止上传</button>
</p>
<div id="res"></div>
<script>
function upload(){
var fd=new FormData();
var f=$("#myfile")[0].files[0];
if(typeof f !== "object") {
alert(‘请先选择文件！‘);
return false;
}
fd.append(‘myfile‘,f);
var xhr=new XMLHttpRequest();
xhr.upload.onprogress=function(e){
if(e.lengthComputable){
var percent=Math.round((e.loaded*100/e.total));
console.log(‘%d‘,percent);
$(‘#tip‘).text(percent);
}
}
xhr.onloadstart=function(e){
console.log("load start");
$(‘#tip‘).text(‘开始上传‘);
$(‘#stopbtn‘).one(‘click‘,function(){
xhr.abort();
$(this).hide();
});
loading(true);
}
xhr.onload=function(e){
var res=xhr.responseText;
var res_arr=JSON.parse(res);
console.log(res_arr);
if(res_arr.status==1){
$(‘#tip‘).text(‘上传成功‘);
$(‘#res‘).html(res_arr.dst);
}else{
$(‘#tip‘).text(res_arr.info);
}
}
xhr.onerror=function(){
console.log(‘error‘);
$(‘#tip‘).text(‘发生错误‘);
}
xhr.onloadend=function (e){
console.log("load end");
loading(false);
}
xhr.open("POST","./doup1.php",true);
xhr.send(fd);
}
function loading(showloading) {
if (showloading) {
$("#uptxt").show();
$("#stopbtn").show();
} else {
$("#uptxt").hide();
$("#stopbtn").hide();
}
}
</script>
</body>
</html>
后端处理doup1.php
<?php
$status=0;
$arr=array(‘status‘=>0,‘info‘=>‘没有文件上传或上传配置问题‘);
if($_FILES){
$f=$_FILES[‘myfile‘];
$tmp_name=$f[‘tmp_name‘];
if($f[‘error‘]===0){
if(is_uploaded_file($tmp_name)){
$file_arr=pathinfo($f[‘name‘]);
if(!is_dir(‘./upfile‘)) mkdir(‘./upfile‘,0755);
$dst_file=‘./upfile/‘.time()."-".substr(md5($file_arr[‘filename‘]),0,5).".".$file_arr[‘extension‘];
$o=move_uploaded_file($tmp_name,$dst_file);
if($o){
$arr=array(‘dst‘=>$dst_file,‘status‘=>1);
}else{
$arr=array(‘status‘=>0,‘info‘=>‘移动文件失败‘);
}
}
}else{
$arr=array(‘status‘=>0,‘info‘=>"up_err_code:".$f[‘error‘]);
}
}
echo json_encode($arr);
时间： 2024-10-11 23:19:49