使用FormData实现ajax文件异步上传
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);
使用FormData实现ajax文件异步上传的更多相关文章
- 文件的上传（表单上传和ajax文件异步上传）
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- 普通文件的上传（表单上传和ajax文件异步上传）
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- 文件的上传（1）（表单上传和ajax文件异步上传）
文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题，答案是不能的！
MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...
- HTML5实现图片文件异步上传
原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- 小程序使用 Promise.all 完成文件异步上传
小程序使用 Promise.all 完成文件异步上传 extends [微信小程序开发技巧总结(二) -- 文件的选取.移动.上传和下载 - Kindear - 博客园 (cnblogs.com)] ...
随机推荐
- php。。。
我可能不会是一个合格的程序员,因为不够专一,学的种类多,精通的却很少,现在我要做为一个php程序员,专注起航了...接下来半年全力以赴,做出成绩吧. 另外之前的狂刷要一千题也要开始每天更新了,最难的就 ...
- LeetCode第[16]题(Java)：3Sum Closest （和目标值最接近的三个数的和）——Medium
题目难度:Medium 题目: Given an array S of n integers, find three integers in S such that the sum is closes ...
- 报错HTTP Status 500 - The given object has a null identifier: cn.itcast.entity.Customer; nested exception is org.hibernate.TransientObjectException: The given object has a null identifier:
在使用模型驱动封装的时候,要保证表单中name属性名和类中属性名一致,否则将会报错如下: HTTP Status 500 - The given object has a null identifie ...
- css 中的background:transparent到底是什么意思有什么作用
有时我在看css时,看到有的css属性定义为background:transparent.意思就是背景透明.实际上background默认的颜色就是透明的属性.所以写和不写都是一样的 有段时间没写文章 ...
- spring3: Bean的作用域
3.4 Bean的作用域 什么是作用域呢?即“scope”,在面向对象程序设计中一般指对象或变量之间的可见范围.而在Spring容器中是指其创建的Bean对象相对于其他Bean对象的请求可见范围. ...
- [转载]java调用PageOffice生成word
一.在开发OA办公或与文档相关的Web系统中,难免会遇到动态生成word文档的需求,为了解决工作中遇到导出word文档的需求,前一段时间上网找了一些资料,在word导出这方面有很多工具可以使用,jac ...
- python基础之继承原理，多态与封装
1.什么是继承? 继承是一种创建新的类的方式.class A: passclass B: pass2.如何继承---->如何寻找继承关系 现实生活中找继承关系是自下而上,在程序中写是自上而下继承 ...
- 条款10：让operator=返回一个reference to *this
例如对象x,y,z.要实现连锁赋值(假设operator=已经重载过了):x = y = z,那么operator=则必须返回一个*this. 注意这个条款不仅仅适合于operator=,对于oper ...
- L137
Uncontacted Tribes at Risk Amid ‘Worrying' Surge in Amazon Deforestation Illegal loggers and militia ...
- xhtml html
xhtml是用xml语言重写了html,相比html更规范了, XHTML是HTML像XML的一个过渡语言,它比HTML严谨性会高点,然后基本语言都还是沿用的HTML的标签,只不过废除了部分表现层的标 ...