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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
javascript动态加载二
Aug 22 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
php 修改密码实现代码
May 24 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 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安全编程之加密功能
2006/10/09 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
寒假实习自荐信
2014/01/26 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
运动会加油稿100字
2014/09/19 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
盲山观后感
2015/06/11 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server