html图片上传api,图片上传功能demo，利用html5的剪贴板api接口

test

DIV#editable {

width: 400px;

height: 300px;

border: 1px dashed blue;

}

window.onload = function () {

function paste_img(e) {

if (e.clipboardData.items) {

// google-chrome

//alert('support clipboardData.items(chrome ...)');

ele = e.clipboardData.items

for (var i = 0; i < ele.length; ++i) {

if (ele[i].kind == 'file' && ele[i].type.indexOf('p_w_picpath/') !== -1) {

var blob = ele[i].getAsFile();

//console.log(blobUrl);

readBlobAsDataURL(blob, function (url) {

var len = document.getElementById("editable").getElementsByTagName("img").length + 1;

var new_img = document.createElement('img');

new_img.setAttribute('name', 'imgPic');

new_img.setAttribute('id', 'imgPic' + len);

new_img.setAttribute('src', url);

new_img.setAttribute("width", 600);

new_img.setAttribute("height", 450);

document.getElementById('editable').appendChild(new_img);

});

}

}

} else {

alert('non-chrome');

}

}

document.getElementById('editable').onpaste = function () { paste_img(event); return false; };

}

function save()

{

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");

oMyForm.append("accountnum", 123456);

//alert(document.getElementById("imgPic").getAttribute('src'));

// fileInputElement中已经包含了用户所选择的文件

//oMyForm.append("userfile", document.getElementById("imgPic").getAttribute('src'));

//var oFileBody = "hey!"; // Blob对象包含的文件内容

for (var i = 1; i <= document.getElementById("editable").getElementsByTagName("img").length; i++) {

var oBlob = dataURLtoBlob(document.getElementById("imgPic"+i).getAttribute('src')); //  new Blob([oFileBody], { type: "text/xml" });

oMyForm.append("webmasterfile", oBlob);

}

var oReq = new XMLHttpRequest();

oReq.open("POST", "http://localhost:42516/WebForm1.aspx");

oReq.send(oMyForm);

}

function dataURLtoBlob(dataurl) {

var arr = dataurl.split(',');

var mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

return new Blob([u8arr], { type: mime });

}

function readBlobAsDataURL(blob, callback) {

var a = new FileReader();

a.onload = function (e) { callback(e.target.result); };

a.readAsDataURL(blob);

}

test p_w_picpath paste in browser

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace TestAPI

{

public partial class WebForm1 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

string[] array = Request.Form.AllKeys;

if (array.Length > 0)

{

HttpPostedFile postFileBase;

if (Request.Files.Count > 0)

{

string dirPath = this.Server.MapPath("~/1");

//如果文件夹不存在则创建

//FileHandle.CreateDir(dirPath);

//result.FileCount = Request.Files.Count;

//result.FilePath = new string[result.FileCount];

string fileNamePath = string.Empty;

for (int i = 0; i < Request.Files.Count; i++)

{

postFileBase = Request.Files[Request.Files.AllKeys[i]];

if (postFileBase != null)

{

if (postFileBase.ContentType.StartsWith("p_w_picpath"))

{

postFileBase.SaveAs(string.Format("{0}\\{1}.png", dirPath, DateTime.Now.Ticks.ToString()));

}

else if (postFileBase.ContentType.StartsWith("text"))

{

postFileBase.SaveAs(string.Format("{0}\\{1}.txt", dirPath, DateTime.Now.Ticks.ToString()));

}

}

}

}

}

}

}

}