图片上传功能演示,利用html5的剪贴板api接口

& lt; % @页面语言=癱#”AutoEventWireup=" true "后台代码=" WebForm1.aspx。cs TestAPI继承了=ebForm1“%在

& lt; html>

& lt; head>

& lt; title> test

& lt; style>

div#编辑{

宽度:400 px;

高度:300 px;

边界:1 px冲蓝;

}

& lt;/style>

& lt;脚本type=" text/javascript”在

,,窗口。onload=function () {

,,,,函数paste_img (e) {

,,,,,,如果(e.clipboardData.items) {

,,,,,,,,//google-chrome 

,,,,,,,,//警报(clipboardData的支持。项(chrome…)”);

,,,,,,,,避署=e.clipboardData.items

,,,,,,,,(var=0;我& lt;ele.length;+ + i) {

,,,,,,,,,,如果(避署[我]。类型==募?,避署[我].type.indexOf (p_w_picpath/) !==1) {

,,,,,,,,,,,,var blob=避署[我].getAsFile ();

,,,,,,,,,,,,//console.log (blobUrl);

,,,,,,,,,,,,readBlobAsDataURL (blob、功能(url) {

,,,,,,,,,,,,,,var len=. getelementbyid(“可编辑”).getElementsByTagName (img)。长度+ 1,

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

,,,,,,,,,,,,,,new_img。setAttribute(“名字”,“imgPic”);

,,,,,,,,,,,,,,new_img。setAttribute (“id”,“imgPic”+ len);

,,,,,,,,,,,,,,new_img。setAttribute (“src”, url);

,,,,,,,,,,,,,,new_img。setAttribute(“宽度”,600年),

,,,,,,,,,,,,,,new_img。setAttribute(“高度”,450年),

,,,,,,,,,,,,,,. getelementbyid(“可编辑”).appendChild (new_img);

,,,,,,,,,,,,});

,,,,,,,,,,}

,,,,,,,,}

,,,,,,其他}{

,,,,,,,,alert (' non-chrome ');

,,,,,,}

,,,,}

,,,,. getelementbyid(“可编辑”)。onpaste=function () {paste_img(事件);返回错误;};

,,}

,,函数保存()

,,{

,,,,var oMyForm=new FormData ();

,,,,oMyForm。追加(“用户名”,“格劳乔”);

,,,,oMyForm。追加(“accountnum ", 123456);

,,,,//警报(. getelementbyid (imgPic) .getAttribute (src));

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

,,,,//oMyForm。追加(“userfile”, . getelementbyid (imgPic) .getAttribute (src));

,,,,//var oFileBody=" & lt; id=盶 \“祝辞& lt; b id=\ b \“祝辞嘿! & lt;/b> & lt;/a>”;//Blob对象包含的文件内容

,,,,(var i=1;我& lt;=. getelementbyid(“可编辑”).getElementsByTagName (img) . length;我+ +){

,,,,,,var oBlob=dataURLtoBlob (. getelementbyid (“imgPic”+ i) .getAttribute (src));//,新团([oFileBody]{类型:“text/xml”});

,,,,,,oMyForm。追加(“webmasterfile”, oBlob);

,,,,}

,,,,var oReq=new XMLHttpRequest ();

,,,,oReq。open(“后”、“http://localhost: 42516/WebForm1.aspx”);

,,,,oReq.send (oMyForm);

,,}

,,函数dataURLtoBlob (dataurl) {

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

,,,,null

图片上传功能演示,利用html5的剪贴板api接口