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 相关文章推荐
jQuery解析Json实例详解
Nov 24 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
JavaScript实例 ODO List分析
Jan 22 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合并js请求的例子
2013/11/01 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
node实现定时发送邮件的示例代码
2017/08/26 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
ddl,dml和dcl的含义
2016/05/08 面试题
人资专员岗位职责
2014/04/04 职场文书
《分一分》教学反思
2014/04/13 职场文书
小学教师师德承诺书
2014/05/23 职场文书
党员争先创优承诺书
2015/01/20 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
班主任开场白
2015/06/01 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
给numpy.array增加维度的超简单方法
2021/06/02 Python