客户端

<label for="text">名称</label>
<input type="text" id="text" name="name"/>
<label for="file">文件</label>
<input type="file" id="file" name="file"/>
<button type="button" onclick="ajaxUploadFile()">确定</button>
<script type="text/javascript">
function ajaxUploadFile(){
var formData = new FormData();
var xmlhttp;
if(window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","http://upload.com/cors.php",true);
// xmlhttp.setRequestHeader("X-Requested-With","XMLHttpRequest");
formData.append("name",document.getElementById("text").value);
formData.append("file",document.getElementById("file").files[0]);
xmlhttp.send(formData);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
console.log("上传成功"+xmlhttp.responseText);//abc
}else{
console.log("上传失败"+xmlhttp.responseText);
}
}
}
}
</script>

服务端

header('Access-Control-Allow-Origin:*');//重要的跨域代码
move_uploaded_file($_FILES['file']['tmp_name'],dirname(__FILE__).'/cors.png');
echo 'abc';

ajax 异步 跨域上传图片的更多相关文章

  1. jQuery的ajax jsonp跨域请求

    了解:ajax.json.jsonp.“跨域”的关系 要弄清楚以上ajax.json.jsonp概念的关系,我觉得弄清楚ajax是“干什么的”,“怎么实现的”,“有什么问题”,“如果解决存在的问题”等 ...

  2. JavaScript(10)——Ajax以及跨域处理

    Ajax以及跨域处理 哈哈哈,终于写到最后一章了.不过也还没有结束,说,不要为了学习而学习,恩.我是为了好好学习而学习呀.哈哈哈.正在尝试爱上代码,虽然有一丢丢的难,不过,我相信我会的! [Ajax] ...

  3. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  4. ajax实现跨域访问

    ajax跨域访问是一个老生畅谈的问题啦,网上解决方法很多,discuz用的p3p协议,有兴趣的朋友可以了解下,比较常用的是JSONP方法,貌似目前这种方法只支持GET方式,不如POST方式安全. 即使 ...

  5. jQuery ajax 302跨域

    一.ajax 302 ajax用于异步获取服务器数据,但是某天有这么一个使用场景: > 基于安全考虑,登录的用户的信息失效时,系统的所有ajax接口都由服务器直接重定向到系统的登录页面,此时登录 ...

  6. AJAX POST&跨域 解决方案 - CORS

    一晃又到新年了,于是开始着手好好整理下自己的文档,顺便把一些自认为有意义的放在博客上,记录成点的点滴.          跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是 ...

  7. 解决Ajax不能跨域的方法

    1.  Ajax不能跨域请求的原因 同源策略(Same Origin Policy),是一种约定,该约定阻止当前脚本获取或者操作另一个域下的内容.所有支持Javascript的浏览器都支持同源策略,也 ...

  8. AJAX POST&跨域 解决方案 - CORS(转载)

    跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...

  9. javascript ajax 脚本跨域调用全解析

    javascript ajax 脚本跨域调用全解析 今天终于有点时间研究了一下javsscript ajax 脚本跨域调用的问题,先在网上随便搜了一下找到一些解决的办法,但是都比较复杂.由是转到jqu ...

随机推荐

  1. mac搭建安卓开发环境

    下载 android studio,利用android studio自带sdk manager下载安卓sdk,在sdk manager中设置相关代理地址,下载完sdk后,在bash_profile中把 ...

  2. xampp添加 django支持

    apache配置文件中添加 WSGIScriptAlias /chatbot1 /Users/css/djangoprojects/chatbot1/chatbot1/wsgi.pyWSGIPytho ...

  3. Win7如何获得TrustedInstaller权限

    将下面的信息保存为启用TakeOwnership.reg,双击注册即可   Windows Registry Editor Version 5.00   [HKEY_CLASSES_ROOT\*\sh ...

  4. div下拉框(待改善)

    不说话,直接上代码,其中函数dealchose()没有实现,各位就不必纠结了 <%@ page language="java" import="java.util. ...

  5. vuex 中关于 mapMutations 的作用

    mapMutations 工具函数会将 store 中的 commit 方法映射到组件的 methods 中.和 mapActions 的功能几乎一样,我们来直接看它的实现: export funct ...

  6. kettle转换之多线程

    kettle转换之多线程   ETL项目中性能方面的考虑一般是最重要的.特别是所讨论的任务频繁运行,或一些列的任务必须在固定的时间内运行.本文重点介绍利用kettle转换的多线程特性.以优化其性能. ...

  7. sprint3 【每日scrum】 TD助手站立会议第六天

    站立会议 组员 昨天 今天 困难 签到 刘铸辉 (组长) 在添加日程类型处添加了选择闹钟间隔多长时间相应,并写了闹钟运行的类 在日历各个事件上都增加闹钟显示,并将数据传递给日程和时间表 感觉跟楠哥在设 ...

  8. 将C#文档注释生成.chm帮助文档(转)

    由于最近需要把以前的一个项目写一个文档,但一时又不知道写成怎样的,又恰好发现了可以生成chm的工具,于是乎我就研究了下,感觉还不错,所以也给大家分享下.好了,不多废话,下面就来实现一下吧. 生成前的准 ...

  9. scapy windows install

    最近有点扫描网络的需求,都说scapy好,但是安装是个事(当然指的是windows安装)有个scapy3k,支持python3,可惜需要powershell,也就是说windows xp是没有戏了. ...

  10. 记录下关于ejabberd及XMPP的官网链接

    ejabberd中文翻译 ——http://wiki.jabbercn.org/Ejabberd2:安装和操作指南 XMPP中文翻译: http://wiki.jabbercn.org/XEP-012 ...