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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
javascript 数组的方法集合
Jun 05 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
js cavans实现静态滚动弹幕
May 21 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php curl选项列表(超详细)
2013/07/01 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python封装shell命令实例分析
2015/05/05 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
写给老师的表扬信
2014/01/21 职场文书
旷课检讨书大全
2014/01/21 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
自荐信模板大全
2015/03/27 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫