图片上传功能demo,利用html5的剪贴板api接口
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestAPI.WebForm1" %>
公司主营业务:成都网站建设、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出西塞山免费做网站回馈大家。
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()));
}
}
}
}
}
}
}
}
本文名称:图片上传功能demo,利用html5的剪贴板api接口
本文路径:http://myzitong.com/article/ghoogj.html