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异步上传图片文件的更多相关文章

  1. [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)

    通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...

  2. HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传

    这是在上篇 HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条 的修改版本.后台代码不变就可以接着使用,但是脚本不再使用jQuery了,改为原生的 JavaScript 代码,所以我 ...

  3. 使用Ajax异步上传图片的方法(html,javascript,php)

    前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-for ...

  4. javascript异步延时载入及推断是否已载入js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  5. javascript异步延时加载及判断是否已加载js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

  6. Jquery实现异步上传图片

    利用jQuery的ajax函数就可以实现异步上传图片了.一开始我是想在处理程序中,直接用context.Request.Files来获取页面中的input file,但是不知道为什么一次获取不了.网上 ...

  7. php结合jquery异步上传图片(ajaxSubmit)

    php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  8. JavaScript怎么上传图片

    JavaScript怎么上传图片 在XMLHttpRequest Level2出台之前,大多数的异步上传图片都是利用iframe去实现的. 至于具体的实现细节,我就不在这边啰嗦的,Google一下就有 ...

  9. C# 异步上传图片案例

    好久没写博客了,都感觉自己快堕落了!今天随性写一篇关于异步上传图片的程序及插件! 说是程序及插件,其实程序占大头,所谓的插件只是两个JS.分别为:jquery.html5upload.js 和 jqu ...

随机推荐

  1. echarts柱状图宽度设置(react-native)

    const optionCategory = { color: ['#B5282A'], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器, ...

  2. module in JavaScript

    JavaScript 在ES6之前没有给出官方模块的定义,因此社区自己搞了两个模块加载方案: CommonJS (node) AMD (browser) 本文略 CommonJS规范 module定义 ...

  3. JavaWeb中遇到的字符编码问题

    一.常见的编码方式 1.UTF-8 2.ISO-8859-1 二.Tomcat的编码问题 Tomcat8和7的编码方式 Tomcat7对URI默认编码是ISO-8859-1 Tomcat8对URI默认 ...

  4. SpringBoot(七)-SpringBoot JPA-Hibernate

    步骤 1.在pom.xml添加mysql,spring-data-jpa依赖2.在application.properties文件中配置mysql连接配置文件3.在application.proper ...

  5. JavaScript之三 - 语法

    1.block 一般就是{}包括起来的代码块,注意的是,js没有块作用域,但是有函数作用域,全局作用域. 2.var 1 var a = b = 1; 如: 123456 function () { ...

  6. 神侃:反向激励能救活多少APP?

    ​ 在很多宣扬互联网企业成功的宣传文案中,为了将其包装地更大高大上和有逼格,总是会将各种心理学术名词用上,以显示自己对市场.用户群体的观察入微.当然事实上所谓的心理学术名词,都是"马后炮&q ...

  7. 利用matplotlib进行数据可视化

    matplotlib是python中的一个画图库,继承了matlib(从名字上也看得出来)的优点和语法,所以对于熟悉matlib的用户来说是十分友好的. pylab和pyplot 关于pylab和py ...

  8. sql -- 获取连续签到的用户列表

    签到表: 需求:统计连续签到的 用户 1.根据用户和日期分组 select user_name, sign_date from user_sign group by user_name, sign_d ...

  9. 2019年后,Java岗面试快速突击指南

    大家好.这篇文章给大家分享一下如何获得一个可以去参加面试的最小可行知识(Minimal Viable Knowledge)!我自己在就基本上靠文章中的策略在找实习的时候拿到了头条阿里的offer.所以 ...

  10. OpenCV3入门(十二)角点检测

    1.角点介绍 角点检测(Corner Detection)是计算机视觉系统中用来获得图像特征的一种方法,广泛应用于运动检测.图像匹配.视频跟踪.三维建模和目标识别等领域中,也称为特征点检测.在图像中角 ...