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. Redis 机器内核参数优化

    " > /proc/sys/vm/overcommit_memory echo never > /sys/kernel/mm/transparent_hugepage/enabl ...

  2. 如何安装与配置MySQL

    关键词:MySQL,安装,配置 这一节,我们讨论一下MySQL的安装配置与卸载 下载 网址:https://dev.mysql.com/downloads/mysql/ 选择社区版,找到对应的电脑,开 ...

  3. Java线程知识

    概念 线程生命周期 Java线程模型 线程方法 线程优先级 线程同步 线程在多任务处理应用程序中有着至关重要的作用 概念 基本概念 进程:在操作系统中每个独立运行的程序就是一个进程 线程:程序执行的一 ...

  4. Daily Practice 2016-09-20

    算法 回文(Palindrome)数字:判断一个数字是不是回文数字,不能使用另外的空间. 提示: 负数可以是回文数字吗? 如果转为字符串需要新分配空间 你也许想到了反转数字,但反转数字可能溢出,怎样处 ...

  5. 使用pandas筛选出指定列值所对应的行

    在pandas中怎么样实现类似mysql查找语句的功能: select * from table where column_name = some_value; pandas中获取数据的有以下几种方法 ...

  6. [开源福利] Arithmetic Generator

    Arithmetic Generator Built with ❤︎ by Simon Ma ✨ A powerful arithmetic generator

  7. A01 React+Antdesign 开发环境准备

    B站教程视频 https://www.bilibili.com/video/av38372336?from=search&seid=1131449710389099812 1 安装node.j ...

  8. Linux +Docker +Nginx 部署代理转发初探

    很多开发人员仅仅只会码代码,如果让开发人员部署一些深入点的东西,或者做负载均衡等,很多开发人员估计就懵逼了,作为一个专业的开发还需要懂一些基本的运维知识:虽然说在互联网行业中,中小企业都有一个牛逼的运 ...

  9. yii2设置默认控制器

    以Yii2高级模板配置为例

  10. Eureka 注册中心看这一篇就够了

    服务注册中心是服务实现服务化管理的核心组件,类似于目录服务的作用,主要用来存储服务信息,譬如提供者 url 串.路由信息等.服务注册中心是微服务架构中最基础的设施之一. 在微服务架构流行之前,注册中心 ...