如何在SharePoint 当中使用纯JSOM上传任意二进制文件(小于2MB)

在微软的官方网站上有关于如何在SharePoint当中使用JS创建一个简单的文本文件的例子,经过我的思考我觉得结合Html5特性的浏览器,是完全可以通过JS来读取到文件的内容的(这一部分的内容请大家自行去了解),进而可以实现一个纯的JS的文件上传的例子,经过我的不断的实践,终于可以实现纯JS的文件上传了,当然还是参考了如下的文章。

限制有2个:

1、文件不能太大1.5MB以内完全是没有问题,这是JSOM的限制,没有办法突破。

2、浏览器必须是完全支持HTML5的,Chrome完全可以,IE必须11以上。

原理:使用FileReader来读取文件的Base64Url流,FileReader.readAsDataURL,然后使用自己写的把Base64的字符转成二进制的函数,把这个二进制的代码传给FileCreationInfomation.Content。

神奇的函数convertDataURIToBinary,我不知道是怎么工作的,如果有兴趣你来解释一下。

看如下的代码:

 1 $(document).ready(function ()
 2 {
 3     // Get the URI decoded host web URL
 4     // We will use this to get a context here to write data
 5     hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
 6 });
 7
 8 function CreateFile()
 9 {
10     // Ensure the HTML5 FileReader API is supported
11     if (window.FileReader)
12     {
13         input = document.getElementById("fileinput");
14         if (input)
15         {
16             file = input.files[0];
17             fr = new FileReader();
18             fr.onload = receivedBinary;
19             fr.readAsDataURL(file);
20         }
21     }
22     else
23     {
24         alert("The HTML5 FileSystem APIs are not fully supported in this browser.");
25     }
26 }
27
28 // Callback function for onload event of FileReader
29 function receivedBinary()
30 {
31     // Get the ClientContext for the app web
32     clientContext = new SP.ClientContext.get_current();
33     // Use the host web URL to get a parent context - this allows us to get data from the parent
34     parentCtx = new SP.AppContextSite(clientContext, hostweburl);
35     parentWeb = parentCtx.get_web();
36     parentList = parentWeb.get_lists().getByTitle("Documents");
37
38     fileCreateInfo = new SP.FileCreationInformation();
39     fileCreateInfo.set_url(file.name);
40     fileCreateInfo.set_overwrite(true);
41     fileCreateInfo.set_content(new SP.Base64EncodedByteArray());
42
43     // Read the binary contents of the base 64 data URL into a Uint8Array
44     // Append the contents of this array to the SP.FileCreationInformation
45     var arr = convertDataURIToBinary(this.result);
46     for (var i = 0; i < arr.length; ++i)
47     {
48         fileCreateInfo.get_content().append(arr[i]);
49     }
50
51     // Upload the file to the root folder of the document library
52     this.newFile = parentList.get_rootFolder().get_files().add(fileCreateInfo);
53
54     clientContext.load(this.newFile);
55     clientContext.executeQueryAsync(onSuccess, onFailure);
56 }
57
58 function onSuccess()
59 {
60     // File successfully uploaded
61     alert("Success!");
62 }
63
64 function onFailure()
65 {
66     // Error occurred
67     alert("Request failed: " + arguments[1].get_message());
68 }
69
70 // Utility function to remove base64 URL prefix and store base64-encoded string in a Uint8Array
71 // Courtesy: https://gist.github.com/borismus/1032746
72 function convertDataURIToBinary(dataURI)
73 {
74     var BASE64_MARKER = ‘;base64,‘;
75     var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
76     var base64 = dataURI.substring(base64Index);
77     var raw = window.atob(base64);
78     var rawLength = raw.length;
79     var array = new Uint8Array(new ArrayBuffer(rawLength));
80
81     for (i = 0; i < rawLength; i++)
82     {
83         array[i] = raw.charCodeAt(i);
84     }
85     return array;
86 }

本文的原文如下:http://dannyjessee.com/blog/index.php/2013/02/using-jsom-to-write-small-files-to-a-sharepoint-2013-document-library/

A recent post on Yammer lamented the lack of examples in the SharePoint 2013 API documentation that use the JavaScript Object Model (JSOM) to do anything more than create a very basic text file in a SharePoint document library.

After lots of digging and a fair amount of trial and error, I now understand why that is the case.

The use case seems simple enough: allow the user to select a file from his or her local machine using an HTML DOM FileUpload object on a form, then use JSOM to upload this file into a document library. It’s certainly easy enough to do using the Client Script Object Model (CSOM). As it turns out, there are a couple of very good reasons why your document upload capability (whether you package it into an app for SharePoint or something else) should NOT leverage JSOM:

  • Per MSDN, you can only work with files up to 1.5 MB when using JSOM. It is recommended that you use REST to deal with larger files. (Incidentally, there is a comment in the article on using the REST endpoints that reads “See How to: Complete basic operations using JavaScript library code in SharePoint 2013 for a code example that shows you how to upload a binary file that is smaller than 1.5 MB by using the SharePoint 2013 Javascript object model.” Unfortunately, the only code example in that article creates a very rudimentary plain text file.)
  • Unless your browser supports the File APIs introduced in HTML5 (specifically the FileReader API), you are out of luck. As a general rule, browsers will block attempts by JavaScript to access and read files from the local file system for security reasons. If you are using IE, only version 10 supports the FileReader API.

Although I was somewhat discouraged by this news, I was determined to develop an app for SharePoint 2013 that presented a simple file upload control to the user and stored the file in a document library (as long as it was smaller than 1.5 MB, of course). I figured as long as I could save Office documents to the library (i.e., more than a simple plain text file), I would have succeeded.

To accomplish this, I knew I would need to make use of the HTML5 FileReader API. (Because of that, I also knew I would need to test this solution using IE 10, Firefox, or Chrome!) Based on the MSDN documentation, I knew I would be setting the contents of the file by using a newSP.Base64EncodedByteArray. The FileReader API exposes three methods for reading the contents of a file:

  1. readAsText() – this method reads the plain text contents of a file, but does not properly handle binary files.
  2. readAsArrayBuffer() – this seemed to be the most promising option, but no matter how I tried to cast the contents of the ArrayBuffer to a Base64-encoded byte array, I was not able to successfully reproduce a file from the file system in a document library. If anyone out there has any suggestions that might enable readAsArrayBuffer() to work, please let me know in the comments!
  3. readAsDataURL() – this method returns the contents of the file using the Data URI scheme. Thanks to a handy utility method I found here, I can convert this Base64-encoded string into a JavaScript Uint8Array and use that to populate the SP.Base64EncodedByteArray that the JSOM expects.
 1 $(document).ready(function ()
 2 {
 3     // Get the URI decoded host web URL
 4     // We will use this to get a context here to write data
 5     hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
 6 });
 7
 8 function CreateFile()
 9 {
10     // Ensure the HTML5 FileReader API is supported
11     if (window.FileReader)
12     {
13         input = document.getElementById("fileinput");
14         if (input)
15         {
16             file = input.files[0];
17             fr = new FileReader();
18             fr.onload = receivedBinary;
19             fr.readAsDataURL(file);
20         }
21     }
22     else
23     {
24         alert("The HTML5 FileSystem APIs are not fully supported in this browser.");
25     }
26 }
27
28 // Callback function for onload event of FileReader
29 function receivedBinary()
30 {
31     // Get the ClientContext for the app web
32     clientContext = new SP.ClientContext.get_current();
33     // Use the host web URL to get a parent context - this allows us to get data from the parent
34     parentCtx = new SP.AppContextSite(clientContext, hostweburl);
35     parentWeb = parentCtx.get_web();
36     parentList = parentWeb.get_lists().getByTitle("Documents");
37
38     fileCreateInfo = new SP.FileCreationInformation();
39     fileCreateInfo.set_url(file.name);
40     fileCreateInfo.set_overwrite(true);
41     fileCreateInfo.set_content(new SP.Base64EncodedByteArray());
42
43     // Read the binary contents of the base 64 data URL into a Uint8Array
44     // Append the contents of this array to the SP.FileCreationInformation
45     var arr = convertDataURIToBinary(this.result);
46     for (var i = 0; i < arr.length; ++i)
47     {
48         fileCreateInfo.get_content().append(arr[i]);
49     }
50
51     // Upload the file to the root folder of the document library
52     this.newFile = parentList.get_rootFolder().get_files().add(fileCreateInfo);
53
54     clientContext.load(this.newFile);
55     clientContext.executeQueryAsync(onSuccess, onFailure);
56 }
57
58 function onSuccess()
59 {
60     // File successfully uploaded
61     alert("Success!");
62 }
63
64 function onFailure()
65 {
66     // Error occurred
67     alert("Request failed: " + arguments[1].get_message());
68 }
69
70 // Utility function to remove base64 URL prefix and store base64-encoded string in a Uint8Array
71 // Courtesy: https://gist.github.com/borismus/1032746
72 function convertDataURIToBinary(dataURI)
73 {
74     var BASE64_MARKER = ‘;base64,‘;
75     var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
76     var base64 = dataURI.substring(base64Index);
77     var raw = window.atob(base64);
78     var rawLength = raw.length;
79     var array = new Uint8Array(new ArrayBuffer(rawLength));
80
81     for (i = 0; i < rawLength; i++)
82     {
83         array[i] = raw.charCodeAt(i);
84     }
85     return array;
86 }

This code works!–mostly. In my environment, Excel Services was able to successfully open my basic test spreadsheet in the browser:

I could also use the Download a Copy option to save local copies and successfully open files of any type:

 

For a simple Word document, though, I was unable to click the link from the document library and have it open successfully in Word. Instead, Word reported an error when trying to open the document:

If you receive the error shown below when opening a document from SharePoint, it is due to “Protected View” in Office 2013. To disable Protected View, follow the steps outlined here.

Regardless of your Office 2013 Protected View settings, the Download a Copy option will open the document without the annoying error message.

时间: 2024-10-12 23:30:54

如何在SharePoint 当中使用纯JSOM上传任意二进制文件(小于2MB)的相关文章

如何在Web页面中集成文件上传功能

当前,个人主页制作非常流行.当用户开发好自己的页面时,需要将文件传输到服务器上,解决这个问题的方法之一 是运行FTP服务器并将每个用户的FTP默认目录设为用户的Web主目录,这样用户就能运行FTP客户程序并上传文件到指定的 Web目录.由于Windows NT 和 Windows98均不提供直接的基于窗口形式的FTP客户程序,用户必须懂得如何使用基于命令行 的FTP客户,或掌握一种新的基于窗口形式的FTP客户程序.因此,这种解决方案仅对熟悉FTP且富有经验的用户来说是可行 的. 如果我们能把文件

利用servlet3.0上传,纯原生上传,不依赖任何第三方包

tomcat7里面自带的servlet3.0.jar,支持很多新特性,例如,annotation配置servlet,上传,异步等等.... 如果你的tomcat版本低于7的话,单独在项目中引入servlet3.0.jar的话,有可能会出错,具体没研究过,可能是不兼容吧.所以要使用servlet3.0新特性的话,尽量使用tomcat7 不多说了,贴上代码 @WebServlet(name = "uploadServlet", urlPatterns = "/uploadServ

SpringBoot上传任意文件功能的实现

一.pom文件依赖的添加 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</gr

文件的上传:二进制文件的上传;

***二进制文件上传的方法:<form action="uploadServlet" method="post" enctype="multipart/form-data"> ***在lib目录下:导入文件上传的开源架包:commons-fileupload-1.2.1.jar,commons-io-2.0.jar: 建立Servlet类:UploadServlet,实现文件上传的方法: package com.lanqiao.jav

[sharepoint]rest api文档库文件上传,下载,拷贝,剪切,删除文件,创建文件夹,修改文件夹属性,删除文件夹,获取文档列表

写在前面 最近对文档库的知识点进行了整理,也就有了这篇文章,当时查找这些接口,并用在实践中,确实废了一些功夫,也为了让更多的人走更少的弯路. 系列文章 sharepoint环境安装过程中几点需要注意的地方 Rest API的简单应用 rest api方式实现对文档库的管理 通过WebClient模拟post上传文件到服务器 WebHttpRequest在sharepoint文档库中的使用 [sharepoint]Rest api相关知识(转) [sharepoint]根据用户名获取该用户的权限

Sharepoint客户端对象模型上传附件

Sharepoint2010中引入了客户端对象模型(COM) 来加强外部对sharepoint站点信息的访问(sharepoint2007只能通过web service) SharePoint中有3种客户端对象模型: ECMAScript .NET托管客户端对象模型 Silverlight客户端对象模型 3种客户端对象模型都通过Client.svc来实现与服务器的交互,对于COM在此不做详细的说明,本节的学习目标是:通过客户端对象模型上传附件 在sharepoint常用于存储附件的容器有:Lib

使用ajax上传表单(带文件)

在使用form表单的时候上传文件+表单,会使得页面跳转,而在某些时候不希望跳转,只变化页面中的局部信息 通过查找资料,可以使用FormData进行ajax操作. FormData介绍:XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优

如何用git将项目代码上传到github

注册账户以及创建仓库 要想使用github第一步当然是注册github账号了.之后就可以创建仓库了(免费用户只能建公共仓库),Create a New Repository,填好名称后Create,之后会出现一些仓库的配置信息,这也是一个git的简单教程.步骤如下: 打开https://github.com 直接在首页上注册 点按钮注册成功之后,在页面上方用户菜单上选择 "+"->New repository 创建一个新的仓库 为仓库取一个名字,点击创建仓库按钮 你将成功创建一个

简述三种异步上传文件方式

 很久没写过博客了! 上次写已经是去年的12月了,离现在也有足足三个月了.这几个月因为要搭建个人网站以及准备个人简历,包括最近要准备最近的各大公司的实习春招,很难抽时间来写博客,这次的异步文件上传我觉得是很有必要了解的,笼络了很多知识点,因此准备写一篇博客来巩固下. 异步上传文件是为了更好的用户体验,是每个前端必须掌握的技能.这里我提出三点有关异步文件上传的方式. 使用第三方控件,如Flash,ActiveX等浏览器插件上传. 使用隐藏的iframe模拟异步上传. 使用XMLHttpReques