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 操作css实现代码
Jun 11 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
js中arguments对象的深入理解
May 14 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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中实现记住密码下次自动登录的例子
2014/11/06 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
python获取目录下所有文件的方法
2015/06/01 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
python构建深度神经网络(续)
2018/03/10 Python
python hash每次调用结果不同的原因
2019/11/21 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
淘宝好评语大全
2014/05/05 职场文书
三严三实对照检查材料
2014/08/25 职场文书
小学生差生评语
2014/12/29 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS