大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下

方法一:利用iframe框架上传图片

html代码如下:

index.js文件:

$(function(){

$("#upload_file").change(function(){

$("#uploadFrom").submit();

});

});

function stopSend(str){

var im="%22+str+%22";

$("#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框架实现图片文件上传的两种方式相关推荐

  1. MySQL 技术篇- linux下mysql数据库利用binlog文件进行数据回滚实例演示,binlog恢复数据库的两种方式

    MySQL 数据库数据回滚 第一章:利用 binlog 进行数据回滚 ① 查看 binlog 文件所在位置 ② 查看主数据正在存储数据的 binlog 文件名 ③ 在控制台查看 binlog 文件内容 ...

  2. springMVC两种方式实现多文件上传及效率比较

    springMVC实现多文件上传的方式有两种,一种是我们经常使用的以字节流的方式进行文件上传,另外一种是使用springMVC包装好的解析器进行上传.这两种方式对于实现多文件上传效率上却有着很大的差距 ...

  3. springmvc和servlet在上传和下载文件(保持文件夹和存储数据库Blob两种方式)

    参与该项目的文件上传和下载.一旦struts2下完成,今天springmvc再来一遍.发现springmvc特别好包,基本上不具备的几行代码即可完成,下面的代码贴: FileUpAndDown.jsp ...

  4. Python页面自动化文件上传两种方式

    Python页面自动化测试之文件上传的两种方式 --广州_vivi 最近教学过程,学员项目出现测试上传文件无法执行的情况,分析发现学员项目的上传按钮并不是input按钮,导致无法使用直接定位元素方式进 ...

  5. django + python上传文件的两种方式

    突然心血来潮,研究了下django+python上传文件的两种方式. 第一:直接采用文件读写的方式上传 1. settings.py文件中设置文件的存放路径和文件读取路径 MEDIA_ROOT = o ...

  6. 【手把手教】Android开发两种方式实现图片的上传下载

    Android 图片上传的应用场景 在Android开发中,很多时候我们需要进行图片,文件的上传下载,最直接的一个应用场景就是用户头像的保存与切换,以及像即时通讯中的图片发送等任何在App中设计图片的 ...

  7. ajax的data传参的两种方式

    ajax的data传参的两种方式 本文为转载. 1.[javascript] view plaincopy   /** * 订单取消 * @return {Boolean} 处理是否成功 */ fun ...

  8. vue 路由传参 params 与 query两种方式的区别(转载)

    vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  ro ...

  9. vue 路由传参 params 与 query两种方式的区别

    vue 路由传参 params 与 query两种方式的区别 初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  ro ...

最新文章

  1. 2015 年你在科研上有哪些值得分享的进展和感悟?
  2. java 马踏棋盘优化_我所知道的十大常用算法之马踏棋盘算法(深度搜索、贪心思想优化 )...
  3. 【小夕精选】如何优雅而时髦的解决不均衡分类问题
  4. php伪静态后301,动态地址rewrite伪静态,然后301跳转到伪静态时死
  5. ECMAScript 的发展历史
  6. android handler的机制和原理_第一百八十回:Android中的Handler机制九
  7. 如何把Sql Server2005 数据库转换成Access
  8. WordPress 5.1.1 发布,修复 CSRF 漏洞
  9. 基于C#在Mongodb的Skip-Limit和Where-Limit的分页对比 并且含mongodb帮助类的源码
  10. HTML5-fishc 学习笔记
  11. 百度C语言面试题2017,百度C语言面试题
  12. 2019 GDUT 新生专题I选集 L题(CodeForces - 1260B)
  13. L1-033 出生年-PAT 团体程序设计天梯赛 GPLT
  14. “差不多先生”引发的悲剧
  15. MySQL数据库选择题
  16. Java设计模式之《装饰器模式》及应用场景
  17. 机械臂—ROS下UR10e+ft300+2f-140gripper ur机械臂配置夹爪及问题解决
  18. husky v8+prettier+lint-staged+commitlint配置
  19. Excel合并单元格如何实现组内合并单元格后排序
  20. 杂乱无章原因简要分析

热门文章

  1. ElasticSearch和sorl区别
  2. Sorl使用——什么是solr
  3. js实现为新添加元素添加绑定事件
  4. Ubuntu安装python后使用pip安装遇到packaging.verson错误
  5. 21、js定义数组的三种方式
  6. 在多台云服务器上的Hadoop和Spark环境配置
  7. log in stackflow
  8. Typora图片不能加载: image load failed
  9. 【IDE-Visual Studio】灾难性故障(异常来自 HRESULT 0x8000FFFF E UNEXPECT
  10. 【物联网】CoAP协议总结