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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
如何快速上手Vuex
Feb 14 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
?生?D片??C字串
2006/12/06 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
原生js实现验证码功能
2017/03/16 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
python笔记:mysql、redis操作方法
2017/06/28 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
国培教师自我鉴定
2014/02/12 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
倡议书的格式写法
2015/04/28 职场文书
运动会加油稿
2015/07/22 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
Python图像处理之图像拼接
2021/04/28 Python
如何用JavaScript学习算法复杂度
2021/04/30 Javascript