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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
JavaScript实现简单动态表格
Dec 02 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
php5中类的学习
2008/03/28 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
小程序登录态管理的方法示例
2018/11/13 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
python字符串的index和find的区别详解
2020/06/20 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
Footshop法国:购买运动鞋
2020/01/19 全球购物
综治宣传月活动总结
2014/04/28 职场文书
活动总结怎么写啊
2014/05/07 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
青岛海底世界导游词
2015/02/11 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
iPhone13再次曝光
2021/04/15 数码科技
windows安装python超详细图文教程
2021/05/21 Python