图片上传功能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('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 = "<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 >

<h3>test p_w_picpath paste in browser</h3>

<input type="button" value="清空图片" />

<input type="button" value="上传图片" />

<div 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("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()));

}

}

}

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。