JavaScript异步上传图片文件的实例代码


Posted in Javascript onJuly 04, 2017

html:

<form action="url" enctype="multipart/form-data" id="myform" method="post">
    <input accept="image/*" id="addfile" type="file" />
</form>

jquery:

$("#addfile").on('change', function () {
  var f = $(this).get(0).files[0];
  var form = document.getElementById('myform');
  var formData = new FormData(form);
  formData.append('Filedata', f);
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", uploadComplete, false);
  xhr.addEventListener("error", uploadFailed, false);
  xhr.open('POST', form.action);
  xhr.send(formData);
});
function uploadComplete(evt)
{
  var data=evt.target.responseText
}
function uploadFailed()
{
  alert("上传失败!请重试!"); 
}

以上所述是小编给大家介绍的JavaScript异步上传图片文件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JSQL 批量图片切换的实现代码
May 05 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
面包屑导航详解
Dec 07 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 #Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 #Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 #Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 #Javascript
详解node如何让一个端口同时支持https与http
Jul 04 #Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 #Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
You might like
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
python的多重继承的理解
2017/08/06 Python
python版本单链表实现代码
2018/09/28 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
质量主管工作职责
2014/09/26 职场文书
购房委托书
2014/10/15 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
人事专员岗位职责
2015/02/03 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
化妆品促销活动总结
2015/05/07 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android