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函数库-集合框架
Apr 27 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
微信支付开发告警通知实例
2016/07/12 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
python比较两个列表是否相等的方法
2015/07/28 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python实现简单飞行棋
2020/02/06 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
举例讲解Python装饰器
2020/12/24 Python
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
Nginx域名转发https访问的实现
2021/03/31 Servers
Mysql文件存储图文详解
2021/06/01 MySQL