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 相关文章推荐
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
javascript生成随机数的方法
May 16 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
javascript 进度条 实现代码
2009/07/30 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python中的列表与元组的使用
2019/08/08 Python
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
大学生自荐信
2013/12/11 职场文书
宿舍违规检讨书
2014/01/12 职场文书
大班上学期个人总结
2015/02/13 职场文书
python glom模块的使用简介
2021/04/13 Python
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript