图片上传功能demo，利用html5的剪贴板api接口
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestAPI.WebForm1" %>
<html>
<head>
<title>test</title>
<style>
DIV#editable {
width: 400px;
height: 300px;
border: 1px dashed blue;
}
</style>
<script type="text/javascript">
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('image/') !== -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 = "<a id=\"a\"><b id=\"b\">hey!</b></a>"; // 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);
}
</script>
</head>
<body >
<h2>test image paste in browser</h2>
<input id="btnClear" type="button" onclick="document.getElementById('editable').innerHTML = ''" value="清空图片" />
<input id="btnSave" type="button" value="上传图片" />
<div id="editable" contenteditable="true" ></div>
</body>
</html>
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("image"))
{
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()));
}
}
}
}
}
}
}
}