html5 XMLHttpRequest 图片异步上传

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<tilte>uploadFile</title>

<script>

function uploadFile(){

var formData = new FormData();

var files = document.getElementById(‘file‘).files;

var file = files[0];

formData.append(‘file‘,file);

var xhr = new XMLHttpRequest();

xhr.open(‘POST‘,‘index.html‘,true);

xhr.onload = function(e){

if(this.status == 200){

document.getElementById("resulte").innerHTML = this.response;

}

};

xhr.send(formData);

}

</script>

</head>

<body>

<form id="form1" enctype="multipart/form-data">

<input type="file" id="file" name="file"><br/>

<input type="button" value="upload" onclick="uploadFile();">

</form>

<output id="result"></output>

</body>

</html>

时间: 2024-11-03 01:32:55

html5 XMLHttpRequest 图片异步上传的相关文章

C#中使用iframe结合js实现图片异步上传

将图片上传的页面放在iframe中,通过iframe跳转到另一个页面,在该页中将图片提交到服务器,而不需要对主页进行刷新,提交成功后用脚本(回调函数)实现上传的图片在主页面的显示. 图片选择页面 Add.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Add.aspx.cs" Inherits="_Add" %> <!DOCTYPE h

html5图片异步上传/ 表单提交相关

1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 举例: 第一种写法 相对路径 $.get('localhost:8080/test_upload/aservlet', { }, function (data) { }); test_upload 为项目名 这里写的为相对路径,不会出现问题 第二种

使用spring mvc+localResizeIMG实现HTML5端图片压缩上传

最近在做一个移动端HTML5的应用,使用到了上传功能,起初使用传统的上传方式上传手机拍照的照片,由于手机拍照出来的照片一般都是好几MB, 所以上传速度是非常慢的. 在网上找了很久找到了localResizeIMG压缩框架,感觉非常的实用,所以在此分享给大家. 第一步:下载localResizeIMG localResizeIMG放在github中的,地址是:https://github.com/think2011/localResizeIMG. 第二步:在web工程中导入localResizeI

HTML5 jQuery+FormData 异步上传文件,带进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="../resources/css/common.css" rel="stylesheet" /> <script src="../resources/js/jquery-2.1.4.js"></script> <

HTML5实现图片压缩上传功能

上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起.虽然客户端可以轻轻松松实现图片压缩再上传,但是我们的应用还可能在浏览器里面打开,怎么办呢,图片压缩.受以前PC上的开发思维影响,尼玛js哪有权限去操作文件,哪有资格压缩图片啊,搞不了,你们客户端去整吧.只能说自己还是有些井底之蛙了.在HTML5的影响下,前端能干的事情越来越多了,开发的功能逼格也越来越高了,H5万岁!前端的魅力也在这,过去不可能的并不意味现在.以后不可能,努力吧,骚年!

微信开发--图片异步上传。

一.需求 微信网页中实现上传头像,用户信息,用户宣传照的功能. 二.问题 微信网页上传普通浏览器的上传不一样,微信内置浏览器禁止了普通的input上传功能,并且此标签在有些移动终端显示不佳. 三.解决 使用微信官方文档提供的jssdk的上传图片接口.微信自己的jssdk里面的图片上传不用考虑兼容性. 具体实现逻辑是: 配置好jssdk后,可以使用jssdk上传接口上传图片到微信服务器,微信服务器会返回给你一个资源id,我们在使用js异步或者表单同步把资源id传输到php服务器端,php服务器端就

基于HTML5多图片Ajax上传可预览

html5多图控件<input id="fileImage" type="file" size="30" name="files[]" multiple /> multiple 这个input的特性是html5新有的,所以IE6这么低级的货是无法兼容的. 这个属性相当于以前的这样的多图情况 <input id="fileImage" type="file" size=&

HTML5多文件异步上传 个人笔记代码

<html> <head> <script> var fileObjs = document.getElementById("file_upload").files; //获取文件数量 var fileNum = fileObjs.length; var formdate = new FormData(); for (var i = 0; i < fileNum; i++) { formdate.append("file_upload

html5压缩图片并上传

手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3 代码如下: // 上传图片 function uploadFile(path) { var type = plus.storage.getItem("upload_goods_image"); //选择成功 $("#heisebg").removeClass("