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 的addEventListener()及attachEvent()区别分析
May 21 Javascript
js常用代码段收集
Oct 28 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
详解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中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python的另外几种语言实现
2015/01/29 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python excel转换csv代码实例
2019/08/26 Python
超实用的 30 段 Python 案例
2019/10/10 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
线程同步的方法
2016/11/23 面试题
检察官就职演讲稿
2014/01/13 职场文书
房地产开盘策划方案
2014/02/10 职场文书
员工升职自我评价
2019/03/26 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python