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转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
js如何验证密码强度
Mar 18 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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&amp;&amp;mysql)四
2006/10/09 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
javascript常用函数(2)
2015/11/05 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
express.js中间件说明详解
2019/03/19 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
python 定时修改数据库的示例代码
2018/04/08 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
生物学学生自我评价
2014/01/17 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
酒店节能减排方案
2014/05/26 职场文书
科学发展观演讲稿
2014/09/11 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python
MySQL GTID复制的具体使用
2022/05/20 MySQL