javascript异步上传图片文件

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("上传失败!请重试!");

}

时间: 2024-10-11 06:03:50

javascript异步上传图片文件的相关文章

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

通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上传文件的操作:          //第1次,post 只上传文件,返回文件名name          //第2次,get 根据文件名name定位服务器上的文件,同时根据浏览器传过来的realname重命名服务器上的文件          //(如果有其他参数,也可以通过第2次一并上传) 图片文件

ajax异步上传图片文件并将其转换为base64格式

高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交.对于IE9以下的浏览器,就得另想他法.下面是高级浏览器的示例代码. $('.image').change(function(e) { var target = $(e.target); var file; if(target[0].files && target[0].files[0] ) { file = target[0].files[0]; } if(file) {

jqueryForm 异步上传图片文件

首先是HTML格式: <li> <span>上传:</span> <div class="loginInput"> <div class="fileInput"> <div class="fileBox"> {if $info['certificate']} <img src="{$info['certificate']}" width="

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

前两天项目中需要用到异步上传图片和显示上传进度的功能,于是找了很多外国的文章,翻山越岭地去遇上各种坑,这里写篇文章记录一下. HTML <form id="fileupload-form"> <input id="fileupload" type="file" name="file" > </form> HTML代码没什么好说,一个form表单,还有文件类型的input.我们来看js部分.

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

引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符 &引用名=目标变量名: 例如: int a int &b=a; //定义引用b,它是变量a的引用,即别名 #include <stdio.h> void main() { int a = 123; int &b = a; printf("a=%d b=%d\n", a, b); } 执行结果: 实例:引用和变量的关系 #include <io

在.net MVC中异步上传图片或者文件

今天用到了MVC异步上传图片,找了半天写下来以后方便查找异步提交图片需要一个MyAjaxForm.cs             地址http://pan.baidu.com/s/1i3lA693 密码txgp 前台代码 @using (Ajax.BeginForm("AddMessages", "MenuInfo", new AjaxOptions { HttpMethod = "post", OnSuccess = "Successd

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

<html> <head> <script type="text/javascript"> /**=========================================** | 异步延时载入js/css文件 | @example loadasync("http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"); | @author [email p

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

php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

搭建一个Tomcat,作为图片服务器,异步上传图片

1.图片服务器Tomcat的设置  tomcat/conf/web.xml中内容更改,将tomcat设置为可以读写 <servlet>     <servlet-name>default</servlet-name>             <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>         <init-param>