html5异步上传,html 异步

不要组件插件怎么异步上传文件，要求选择文件后直接上传（不点发送提

结合HTML5，

创新互联公司专业为企业提供鹤峰网站建设、鹤峰做网站、鹤峰网站设计、鹤峰网站制作等企业网站建设、网页设计与制作、鹤峰企业网站模板建站服务，十多年鹤峰做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

form enctype="multipart/form-data"

input id="file" name="file" type="file" /

input type="button" value="Upload" /

/form

progress/progress

$('#file').change(function(){

var formData = new FormData($('form')[0]);

$.ajax({

url: 'upload.php',//接收页面

type: 'POST',

xhr: function() { //XHR事件

myXhr = $.ajaxSettings.xhr();

if(myXhr.upload){ //检测是否有此方法属性

myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // 设置进度

}

return myXhr;

},

//Ajax事件

beforeSend: beforeSendHandler,

success: completeHandler,

error: errorHandler,

// Form数据

data: formData,

cache: false,

contentType: false,

processData: false

});

});

如何使用HTML5进行文件拖放

如何使用HTML5进行文件拖放

1.实现将文件拖放到页面元素上

2.在JavaScript中分析被拖放的文件

3.在客户端上加载和解析文件

4.使用XMLHttpRequest2将文件异步上传到服务器

5.上传时，显示图形进度条

6.使用进程增强( progressive enhancement)以确保文件上传表单在所有浏览器正常工作

7.纯JavaScript代码，不使用其它库。

如何使用HTML5实现利用摄像头拍照上传功能

一，直接上可以代码参考下：

script

//判断浏览器是否支持HTML5 Canvas

window.onload = function () {

try {

//动态创建一个canvas元 ，并获取他2Dcontext。如果出现异常则表示不支持 document.createElement("canvas").getContext("2d");

document.getElementByIdx("support").innerHTML = "浏览器支持HTML5 CANVAS";

}

catch (e) {

document.getElementByIdx("support").innerHTML = "浏览器不支持HTML5 CANVAS";

}

};

//这段代 主要是获取摄像头的视频流并显示在Video 签中

window.addEventListener("DOMContentLoaded", function () {

var canvas = document.getElementByIdx("canvas"),

context = canvas.getContext("2d"),

video = document.getElementByIdx("video"),

videoObj = { "video": true },

errBack = function (error) {

console.log("Video capture error: ", error.code);

};

//navigator.getUserMedia这个写法在Opera中好像是navigator.getUserMedianow

if (navigator.getUserMedia) {

navigator.getUserMedia(videoObj, function (stream) {

video.src = stream;

video.play();

}, errBack);

} else if (navigator.webkitGetUserMedia) {

navigator.webkitGetUserMedia(videoObj, function (stream) {

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errBack);

}

//这个是拍照按钮的事件，

$("#snap").click(function () {

context.drawImage(video, 0, 0, 320, 320);

//CatchCode();

});

}, false);

//定时器

var interval = setInterval(CatchCode, "300");

//这个是 刷新上 图像的

function CatchCode() {

$("#snap").click();

//实际运用可不写，测试代 ， 为单击拍照按钮就获取了当前图像，有其他用途

var canvans = document.getElementByIdx("canvas");

//获取浏览器页面的画布对象

//以下开始编 数据

var imgData = canvans.toDataURL();

//将图像转换为base64数据

var base64Data = imgData.substr(22);

//在前端截取22位之后的字符串作为图像数据

//开始异步上

$.post("uploadImgCode.ashx", { "img": base64Data }, function (data, status) {

if (status == "success") {

if (data == "OK") {

alert("二维 已经解析");

}

else {

// alert(data);

}

}

else {

alert("数据上 失败");

} }, "text");

}

/script

二.最后的就是接收经过base64编码之后的图像文件了。

public void ProcessRequest (HttpContext context) {

string img;//接收经过base64编 之后的字符串

context.Response.ContentType = "text/plain";

try {

img =context.Request["img"].ToString();

//获取base64字符串

byte[] imgBytes = Convert.FromBase64String(img);

//将base64字符串转换为字节数组

System.IO.Stream stream = new System.IO.MemoryStream(imgBytes);

//将字节数组转换为字节流

//将流转回Image，用于将PNG 式照片转为jpg，压缩体积以便保存。

System.Drawing.Image imgae = System.Drawing.Image.FromStream(stream);

imgae.Save(context.Server.MapPath("~/Test/") + Guid.NewGuid().ToString()+".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);//保存图片

context.Response.Write("OK");//输出调用结果

} catch (Exception msg) {

img = null;

context.Response.Write(msg);

return;

}

}