温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-08-01 11:07:05 来源:网络 阅读:757 作者:tulipmym 栏目:移动开发

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

                            }

                        }

                    }

                }

            }

        }

    }

}


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI