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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
JavaScript实现登录窗体
Jun 22 Javascript
Vue操作Storage本地化存储
Apr 29 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
php抓取页面与代码解析 推荐
2010/07/23 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
详解jQuery事件
2017/01/13 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python遍历小写英文字母的方法
2019/01/02 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
求职面试个人自我评价
2014/02/28 职场文书
学术会议主持词
2014/03/17 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
小学科学课教学反思
2016/02/23 职场文书