原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下
方法一:利用iframe框架上传图片
html代码如下:
index.js文件:
$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="";
$("#msg").append(im);
}
upload.php文件:
$file=$_FILES['upfile'];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//调用iframe父窗口的js 函数
echo "parent.stopSend('$name')";
?>
方法二:原生态ajax文件上传
Html5 Ajax 上传文件
var xhr;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
}
function UpladFile()
{
var fileObj = document.getElementById("file").files[0];
var FileController = 'upload.php';
var form = new FormData();
form.append("myfile", fileObj);
createXMLHttpRequest();
xhr.onreadystatechange = handleStateChange;
xhr.open("post", FileController, true);
xhr.send(form);
}
function handleStateChange()
{
if(xhr.readyState == 4)
{
if (xhr.status == 200 || xhr.status == 0)
{
var result = xhr.responseText;
var json = eval("(" + result + ")");
alert('图片链接:n'+json.file);
}
}
}
.txt{ height:28px; border:1px solid #cdcdcd; width:670px;}
.mybtn{ background-color:#FFF; line-height:14px;vertical-align:middle;border:1px solid #CDCDCD;height:30px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
图片
浏览...
上传
php代码:
if(isset($_FILES["myfile"]))
{
$ret = array();
$uploadDir = 'images'.DIRECTORY_SEPARATOR.date("Ymd").DIRECTORY_SEPARATOR;
$dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;
file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
if(!is_array($_FILES["myfile"]["name"])) //single file
{
$fileName = time().uniqid().'.'.pathinfo($_FILES["myfile"]["name"])['extension'];
move_uploaded_file($_FILES["myfile"]["tmp_name"],$dir.$fileName);
$ret['file'] = DIRECTORY_SEPARATOR.$uploadDir.$fileName;
}
echo json_encode($ret);
}
?>
以上就是本文的全部内容,希望对大家学习理解ajax和iframe框架实现图片文件上传有所帮助。
原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式相关推荐
- MySQL 技术篇- linux下mysql数据库利用binlog文件进行数据回滚实例演示,binlog恢复数据库的两种方式
MySQL 数据库数据回滚 第一章:利用 binlog 进行数据回滚 ① 查看 binlog 文件所在位置 ② 查看主数据正在存储数据的 binlog 文件名 ③ 在控制台查看 binlog 文件内容 ...
- springMVC两种方式实现多文件上传及效率比较
springMVC实现多文件上传的方式有两种,一种是我们经常使用的以字节流的方式进行文件上传,另外一种是使用springMVC包装好的解析器进行上传.这两种方式对于实现多文件上传效率上却有着很大的差距 ...
- springmvc和servlet在上传和下载文件(保持文件夹和存储数据库Blob两种方式)
参与该项目的文件上传和下载.一旦struts2下完成,今天springmvc再来一遍.发现springmvc特别好包,基本上不具备的几行代码即可完成,下面的代码贴: FileUpAndDown.jsp ...
- Python页面自动化文件上传两种方式
Python页面自动化测试之文件上传的两种方式 --广州_vivi 最近教学过程,学员项目出现测试上传文件无法执行的情况,分析发现学员项目的上传按钮并不是input按钮,导致无法使用直接定位元素方式进 ...
- django + python上传文件的两种方式
突然心血来潮,研究了下django+python上传文件的两种方式. 第一:直接采用文件读写的方式上传 1. settings.py文件中设置文件的存放路径和文件读取路径 MEDIA_ROOT = o ...
- 【手把手教】Android开发两种方式实现图片的上传下载
Android 图片上传的应用场景 在Android开发中,很多时候我们需要进行图片,文件的上传下载,最直接的一个应用场景就是用户头像的保存与切换,以及像即时通讯中的图片发送等任何在App中设计图片的 ...
- ajax的data传参的两种方式
ajax的data传参的两种方式 本文为转载. 1.[javascript] view plaincopy /** * 订单取消 * @return {Boolean} 处理是否成功 */ fun ...
- vue 路由传参 params 与 query两种方式的区别(转载)
vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
- vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
最新文章
- 2015 年你在科研上有哪些值得分享的进展和感悟?
- java 马踏棋盘优化_我所知道的十大常用算法之马踏棋盘算法(深度搜索、贪心思想优化 )...
- 【小夕精选】如何优雅而时髦的解决不均衡分类问题
- php伪静态后301,动态地址rewrite伪静态,然后301跳转到伪静态时死
- ECMAScript 的发展历史
- android handler的机制和原理_第一百八十回:Android中的Handler机制九
- 如何把Sql Server2005 数据库转换成Access
- WordPress 5.1.1 发布,修复 CSRF 漏洞
- 基于C#在Mongodb的Skip-Limit和Where-Limit的分页对比 并且含mongodb帮助类的源码
- HTML5-fishc 学习笔记
- 百度C语言面试题2017,百度C语言面试题
- 2019 GDUT 新生专题I选集 L题(CodeForces - 1260B)
- L1-033 出生年-PAT 团体程序设计天梯赛 GPLT
- “差不多先生”引发的悲剧
- MySQL数据库选择题
- Java设计模式之《装饰器模式》及应用场景
- 机械臂—ROS下UR10e+ft300+2f-140gripper ur机械臂配置夹爪及问题解决
- husky v8+prettier+lint-staged+commitlint配置
- Excel合并单元格如何实现组内合并单元格后排序
- 杂乱无章原因简要分析