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. python猜数字游戏快速求解解决方案

    #coding=utf-8 def init_set(): r10=range(10) return [(i, j, k, l) for i in r10 for j in r10 for k in ...

  2. CSS 之动态变换背景颜色

    先上效果图 HTML代码: 123456789 <div class="header"> <h1>GCCHRN'S BLOG</h1> < ...

  3. 玩转UITableView

    UITableView这个iOS开发中永远绕不开的UIView,那么就不可避免的要在多个页面多种场景下反复摩擦UITableView,就算是刚跳进火坑不久的iOS Developer也知道实现UITa ...

  4. 海洋深处的数据中心——微软Natick项目

    数据中心(data center)是云计算的支柱,云计算的蓬勃发展离不开数据中心在建造运营方面的不断创新.但云端数据中心的运行过程中会产生大量热量,冷却降温过程则意味着巨大的能源消耗,这意味着需要庞大 ...

  5. 函数节流throttle和防抖debounce

    throttle 函数节流 不论触发函数多少次,函数只在设定条件到达时调用第一次函数设定,函数节流 1234567891011 let throttle = function(fn,intervalT ...

  6. 【简单版】hexo博客搭建流程梳理

    前言 本文章会为你梳理一个搭建hexo博客的流程 相关网址: Docs: https://hexo.io/docs/ Themes: https://hexo.io/themes/ 安装hexo 准备 ...

  7. 理解 Java 内存模型的因果性约束

    目录 理解 Java 内存模型的因果性约束 欢迎讨论 规范理解 例子练习 例子1 例子2 总结 理解 Java 内存模型的因果性约束 欢迎讨论 欢迎加入技术交流群186233599讨论交流,也欢迎关注 ...

  8. IIS+PHP+Mysql 返回500,服务器内部资源问题

    这个错误困扰了我好久.... 尝试了好多方法都不管用,最后突然发现我的代码是: <?php $link=mysql_connect("localhost","xxx ...

  9. SpringBoot整合Swagger2案例,以及报错:java.lang.NumberFormatException: For input string: ""原因和解决办法

    原文链接:https://blog.csdn.net/weixin_43724369/article/details/89341949 SpringBoot整合Swagger2案例 先说SpringB ...

  10. 用vue + leancloud开发一个免费的博客

    项目地址 https://github.com/Fee-ing/Fe... 在线预览 在线预览地址: 搭建免费博客