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/jquery对上传文件格式过滤的方法
Jul 25 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
使用python绘制温度变化雷达图
2019/10/18 Python
python滑块验证码的破解实现
2019/11/10 Python
Python之字典对象的几种创建方法
2020/09/30 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
50道外企软件测试面试题
2014/08/18 面试题
Java servlet面试题
2012/03/04 面试题
2014年安全生产大检查方案
2014/05/13 职场文书
群众路线剖析材料
2014/09/30 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书