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 事件流和事件绑定
Jul 16 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
JSONObject使用方法详解
Dec 17 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
详解vue axios用post提交的数据格式
Aug 07 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Python简单进程锁代码实例
2015/04/27 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Python编写单元测试代码实例
2020/09/10 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
坚定理想信念心得体会
2014/03/11 职场文书
保密工作目标责任书
2014/07/28 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技