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. Apache JMeter--1基础介绍

    一.JMeter 介绍 近期公司要做jmeter调研,将性能测试推广到全部测试组,便一边学习一边做记录. Apache JMeter是100%纯JAVA桌面应用程序,是一款优秀的开源性能测试工具,被设 ...

  2. Java學習筆記(基本語法)

    本文件是以學習筆記的概念為基礎,用於自我的複習紀錄,不過也開放各位的概念指證.畢竟學習過程中難免會出現觀念錯誤的問題.也感謝各位的觀念指證. 安裝JDK 在Oracle網站中找自己系統的JDK下載位置 ...

  3. Flask添加新命令

    代码: import click from flask import Flask app = Flask(__name__) @app.cli.command() def hg(): click.ec ...

  4. kafka Py客户端

    1.pip install kafka-python 2.Producer.py from kafka import KafkaProducer producer = KafkaProducer(bo ...

  5. Android APP性能及专项测试(个人整理)

    移动测试. Android测试 .APP测试   Android篇 1. 性能测试 Android性能测试分为两类:1.一类为rom版本(系统)的性能测试2.一类为应用app的性能测试 Android ...

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

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

  7. SAT考试里最难的数学题? · 三只猫的温暖

    问题 今天无意中在Quora上看到有人贴出来一道号称是SAT里最难的一道数学题,一下子勾起了我的兴趣.于是拿起笔来写写画画,花了差不多十五分钟搞定.觉得有点意思,决定把解题过程记下来.原帖的图太小,我 ...

  8. android使用giflib加载gif

    转载请标明出处:https:////www.cnblogs.com/tangZH/p/12356915.html 背景不多说,反正ndk加载gif比java上加载gif好很多很多,主要体现在内存占用与 ...

  9. CentOS 7 国内源配置

    CentOS 7 国内源配置 1. 备份自带源 # 首先要确认你有 wget 命令, 并且连着网 # cd /etc/yum.repos.d/ # mkdir repo # mv *.repo rep ...

  10. Glide源码解析一,初始化

    转载请标明出处:https:////www.cnblogs.com/tangZH/p/12409849.html Glide作为一个强大的图片加载框架,已经被android官方使用,所以,明白Glid ...