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实现的网页颜色代码表全集
Jul 17 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
javascript实现贪吃蛇小练习
Jul 05 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 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(5) 类和对象
2010/02/16 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python使用MD5加密字符串示例
2014/08/22 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python中sleep函数用法实例分析
2015/04/29 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python实现拓扑排序的基本教程
2018/03/11 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
爬山的活动方案
2014/08/16 职场文书
法定代表人授权委托书
2014/09/19 职场文书
党员个人总结范文
2015/02/14 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python