从word中复制图片,粘贴到HTML中,怎么上传

我们公司使用的是plupload插件,
它有个方法addFild,需要传递一个file对象才能把文件放到上传队列中,

原本客户上传方法是,先把word中的图片另存为到本地,然后打开文件选择框,然后选择这个图片,获取到了file对象后通过插件的
start方法上传
客户认为这个操作太繁琐,想要直接复制word中的图片,粘贴到页面上,然后直接上传

我看了网上很多paste事件的JS,但是这些JS目前只能支持截图到剪切板的方式,
我尝试过以下代码,操作方式是复制word中的图片,再粘贴到DIV中

//  <div id="pasteImg" style="width:400px;height:300px;border:dashed" contenteditable="true"></div>这是HTML中的DIV
document.getElementById('pasteImg').addEventListener("paste", function(e) {
    var cbd = e.clipboardData;
    var ua = window.navigator.userAgent;

    // 如果是 Safari 直接 return
    if (!(e.clipboardData && e.clipboardData.items)) {
        return;
    }

    // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
    if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
        return;
    }

    for (var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        if (item.kind == "file") {
            var blob = item.getAsFile();
            if (blob.size === 0) {
                return;
            }
            // blob 就是从剪切板获得的文件 可以进行上传或其他操作
        }
    }
}, false);

结果是当执行到
 var blob = item.getAsFile();后返回null.
继而报错,
而使用QQ和其他截图工具截图的方式能获取到blob

问题1:为什么word中复制的图片调用getAsFile方法后返回null
2 如何实现用户需求?

3 个解决方案

#1

引用 楼主 deamon0 的回复:

我们公司使用的是plupload插件,
它有个方法addFild,需要传递一个file对象才能把文件放到上传队列中,

原本客户上传方法是,先把word中的图片另存为到本地,然后打开文件选择框,然后选择这个图片,获取到了file对象后通过插件的
start方法上传
客户认为这个操作太繁琐,想要直接复制word中的图片,粘贴到页面上,然后直接上传

我看了网上很多paste事件的JS,但是这些JS目前只能支持截图到剪切板的方式,
我尝试过以下代码,操作方式是复制word中的图片,再粘贴到DIV中

//  <div id="pasteImg" style="width:400px;height:300px;border:dashed" contenteditable="true"></div>这是HTML中的DIV
document.getElementById('pasteImg').addEventListener("paste", function(e) {
    var cbd = e.clipboardData;
    var ua = window.navigator.userAgent;

    // 如果是 Safari 直接 return
    if (!(e.clipboardData && e.clipboardData.items)) {
        return;
    }

    // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
    if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
        return;
    }

    for (var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        if (item.kind == "file") {
            var blob = item.getAsFile();
            if (blob.size === 0) {
                return;
            }
            // blob 就是从剪切板获得的文件 可以进行上传或其他操作
        }
    }
}, false);

结果是当执行到
 var blob = item.getAsFile();后返回null.
继而报错,
而使用QQ和其他截图工具截图的方式能获取到blob

问题1:为什么word中复制的图片调用getAsFile方法后返回null
2 如何实现用户需求?

需要借助于控件来实现，普通的JS，不好实现。包括HTML5也不能实现。你可以在网上找一下，好像有类似的控件。

#2

引用 楼主 deamon0 的回复:

我们公司使用的是plupload插件,
它有个方法addFild,需要传递一个file对象才能把文件放到上传队列中,

原本客户上传方法是,先把word中的图片另存为到本地,然后打开文件选择框,然后选择这个图片,获取到了file对象后通过插件的
start方法上传
客户认为这个操作太繁琐,想要直接复制word中的图片,粘贴到页面上,然后直接上传

我看了网上很多paste事件的JS,但是这些JS目前只能支持截图到剪切板的方式,
我尝试过以下代码,操作方式是复制word中的图片,再粘贴到DIV中

//  <div id="pasteImg" style="width:400px;height:300px;border:dashed" contenteditable="true"></div>这是HTML中的DIV
document.getElementById('pasteImg').addEventListener("paste", function(e) {
    var cbd = e.clipboardData;
    var ua = window.navigator.userAgent;

    // 如果是 Safari 直接 return
    if (!(e.clipboardData && e.clipboardData.items)) {
        return;
    }

    // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
    if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
        return;
    }

    for (var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        if (item.kind == "file") {
            var blob = item.getAsFile();
            if (blob.size === 0) {
                return;
            }
            // blob 就是从剪切板获得的文件 可以进行上传或其他操作
        }
    }
}, false);

结果是当执行到
 var blob = item.getAsFile();后返回null.
继而报错,
而使用QQ和其他截图工具截图的方式能获取到blob

问题1:为什么word中复制的图片调用getAsFile方法后返回null
2 如何实现用户需求?

楼主试试这个控件： http://www.cnblogs.com/xproer/archive/2011/04/08/2009500.html
1.FCKEditor2.x。从剪帖板，本地硬盘，第三方软件或Word文档中复制图片，然后点击编辑器工具栏中的”粘贴图片”按钮。图片将自动上传到Web服务器中.

2.FCKEditor2.x编辑器。上传成功

3.CKEditor3.x编辑器。

4.CKEditor3.x-粘贴Excel

5.KindEditor3.x-粘贴图片

6.KindEditor4.x-粘贴Excel

7.UEditor1.x编辑器


Xproer.WordPaster整合代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>WordPaster For FCKEditor-2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link type="text/css" rel="Stylesheet" href="WordPaster/css/WordPaster.css"/>
	<link type="text/css" rel="stylesheet" href="WordPaster/css/ui-lightness/jquery-ui-1.8.11.custom.css" />
    <script type="text/javascript" src="WordPaster/js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="WordPaster/js/jquery-ui-1.8.11.custom.min.js"></script>
	<script type="text/javascript" src="WordPaster/js/WordPaster.js" charset="utf-8"></script>
	<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
	<!—textarea控件,FCK编辑器需要借助于这个控件创建-->
	<textarea id="txtContent" name="txtContent" cols="1" rows="1"></textarea>
	<!--创建FCKEditor控件-->
	<script language="javascript" type="text/javascript">
		var pasterMgr = new PasterManager();
		pasterMgr.Config["PostUrl"] = "http://localhost:10727/asp.net/upload.aspx";
		pasterMgr.Load();//加载控件

		var fck = new FCKeditor('txtContent');
		fck.BasePath = "fckeditor/";
		//oFCKeditor.ToolbarSet = "Basic";
		fck.Height = 300;
		fck.Value = '';
		fck.ReplaceTextarea();//将上面的textarea替换成FCK编辑器，这样服务端可以通过Request.Form["txtContent"]取到数据

		//初始化编辑器
		function FCKeditor_OnComplete(editorInstance)
		{
			pasterMgr.SetEditor(editorInstance);
		}
	</script>
</body>
</html>

Chrome,Firefox,IE(x86),IE(x64)整合示例下载：
ASP.NET-FCKEditor2.x示例
ASP.NET-CKEditor3.x示例
ASP.NET-CKEditor4.x示例
ASP.NET-KindEditor3.x示例
ASP.NET-KindEditor4.x示例
ASP.NET-TinyMCE3.x示例
ASP.NET-TinyMCE4.x示例
ASP.NET-UEditor1.x示例
ASP.NET-xheditor1.x示例
ASP.NET-CuteEditor6.x示例
ASP.NET-eWebEditor9.x示例

JSP-FCKEditor2.x示例
JSP-CKEditor3.x示例
JSP-CKEditor4.x示例
JSP-KindEditor3.x示例
JSP-KindEditor4.x示例
JSP-TinyMCE3.x示例
JSP-TinyMCE4.x示例
JSP-UEditor1.x示例
JSP-Xheditor1.x示例

PHP-FCKEditor2.x示例
PHP-CKEditor3.x示例
PHP-CKEditor4.x示例
PHP-KindEditor3.x示例
PHP-KindEditor4.x示例
PHP-TinyMCE3.x示例
PHP-TinyMCE4.x示例
PHP-UEditor1.x示例
PHP-xhEditor1.x示例

#3

引用 2 楼 cnetfcwra 的回复:

Word图片上传控件(WordPaster2)： http://www.cnblogs.com/xproer/archive/2011/04/08/2009500.html
1.FCKEditor2.x。从剪帖板，本地硬盘，第三方软件或Word文档中复制图片，然后点击编辑器工具栏中的”粘贴图片”按钮。图片将自动上传到Web服务器中.

Xproer.WordPaster整合代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>WordPaster For FCKEditor-2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link type="text/css" rel="Stylesheet" href="WordPaster/css/WordPaster.css"/>
	<link type="text/css" rel="stylesheet" href="WordPaster/css/ui-lightness/jquery-ui-1.8.11.custom.css" />
    <script type="text/javascript" src="WordPaster/js/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="WordPaster/js/jquery-ui-1.8.11.custom.min.js"></script>
	<script type="text/javascript" src="WordPaster/js/WordPaster.js" charset="utf-8"></script>
	<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
</head>
<body>
	<!—textarea控件,FCK编辑器需要借助于这个控件创建-->
	<textarea id="txtContent" name="txtContent" cols="1" rows="1"></textarea>
	<!--创建FCKEditor控件-->
	<script language="javascript" type="text/javascript">
		var pasterMgr = new PasterManager();
		pasterMgr.Config["PostUrl"] = "http://localhost:10727/asp.net/upload.aspx";
		pasterMgr.Load();//加载控件

		var fck = new FCKeditor('txtContent');
		fck.BasePath = "fckeditor/";
		//oFCKeditor.ToolbarSet = "Basic";
		fck.Height = 300;
		fck.Value = '';
		fck.ReplaceTextarea();//将上面的textarea替换成FCK编辑器，这样服务端可以通过Request.Form["txtContent"]取到数据

		//初始化编辑器
		function FCKeditor_OnComplete(editorInstance)
		{
			pasterMgr.SetEditor(editorInstance);
		}
	</script>
</body>
</html>

Chrome,Firefox,IE(x86),IE(x64)整合示例下载：
ASP.NET-FCKEditor2.x示例
ASP.NET-CKEditor3.x示例
ASP.NET-CKEditor4.x示例
ASP.NET-KindEditor3.x示例
ASP.NET-KindEditor4.x示例
ASP.NET-TinyMCE3.x示例
ASP.NET-TinyMCE4.x示例
ASP.NET-UEditor1.x示例
ASP.NET-xheditor1.x示例
ASP.NET-CuteEditor6.x示例
ASP.NET-eWebEditor9.x示例

JSP-FCKEditor2.x示例
JSP-CKEditor3.x示例
JSP-CKEditor4.x示例
JSP-KindEditor3.x示例
JSP-KindEditor4.x示例
JSP-TinyMCE3.x示例
JSP-TinyMCE4.x示例
JSP-UEditor1.x示例
JSP-Xheditor1.x示例

PHP-FCKEditor2.x示例
PHP-CKEditor3.x示例
PHP-CKEditor4.x示例
PHP-KindEditor3.x示例
PHP-KindEditor4.x示例
PHP-TinyMCE3.x示例
PHP-TinyMCE4.x示例
PHP-UEditor1.x示例
PHP-xhEditor1.x示例

这种需求只能借助于控件来实现。普通的JS或者HTML5只能拿到剪切板的信息，但是word中的图片实际上是保存在本地目录中的，JS是无法访问到这个目录的，浏览器限制了这个权限。

想简化用户操作，提高用户体验的话，还是用控件来做。浏览器的限制比较多，没有控件*度高。