SharePoint REST API - 使用REST API和jQuery上传一个文件

叁歲伎倆 2022-04-03 08:10 301阅读 0赞

本篇主要通过两个代码示例来展示如何应用REST API和jQuery上传文件到SharePoint。

示例会使用REST接口和jQuery AJAX请求来将一个本地文件添加到SharePoint文档库并修改它的一些属性。主要有以下几个操作步骤：

  1. 使用FileReader API将本地文件转换成数组（需要HTML5支持），jQuery的(document).ready函数会检查浏览器对FileReader API的支持情况。

  2. 使用文件夹的文件集合对象的Add方法将文件添加到文档库，将数组缓冲放到POST请求的body里。本文介绍的示例会使用getfolderbyserverrelativeurl端点来获取文件集合对象，如果不用这个，你也可以使用列表端点如…/_api/web/lists/getbytitle(‘‘)/rootfolder/files/add。

  3. 使用ListItemAllFields属性来获取与上传文件相对应的列表项。

  4. 使用MERGE请求来更改列表项的标题和显示名。

运行代码示例

本文中的两个代码示例使用REST API和jQuery AJAX请求来上传文件到文档库，然后更改对应列表项的属性。第一个例子使用SP.AppContextSite来跨SharePoint域进行调用，就像SharePoint承载的Add-in在上传文件到承载它的网站时做的那样。另一个例子是在同域调用的，就像上传到Add-in所在的网站时做的那样。

注意用JavaScript编写的提供程序承载的Add-in必须使用SP.RequestExecutor跨域库来向SharePoint域发送请求。

使用本文提到的示例，你需要做以下事情：

  1. 首先你要有SharePoint Server 2013、2016或者是Online的环境。

  2. 执行代码的用户需要有对文档库的写权限，如果你开发的是一个SharePoint Add-in的话，你可以在列表范围指定写权限。

  3. 支持FileReader API（HTML5）的浏览器。

  4. 在你的页面中引用jQuery库，例如：

  1. <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
  1. 在你的页面中添加以下控件：
  1. <input id="getFile" type="file"/><br />
  2.   <input id="displayName" type="text" value="Enter a unique name" /><br />
  3.   <input id="addFileButton" type="button" value="Upload" onclick="uploadFile()"/>

代码示例一：使用REST API和jQuery跨SharePoint域上传文件

大师傅下面的代码示例将文件上传到承载SharePoint Add-in的SharePoint网站。

  1. 'use strict';
  3. var appWebUrl, hostWebUrl;
  5. jQuery(document).ready(function () {
  7.     // Check for FileReader API (HTML5) support.
  8.     if (!window.FileReader) {
  9.         alert('This browser does not support the FileReader API.');
  10.     }
  12.     // Get the add-in web and host web URLs.
  13.     appWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
  14.     hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
  15. });
  17. // Upload the file.
  18. // You can upload files up to 2 GB with the REST API.
  19. function uploadFile() {
  21.     // Define the folder path for this example.
  22.     var serverRelativeUrlToFolder = '/shared documents';
  24.     // Get test values from the file input and text input page controls.
  25.     // The display name must be unique every time you run the example.
  26.     var fileInput = jQuery('#getFile');
  27.     var newName = jQuery('#displayName').val();
  29.     // Initiate method calls using jQuery promises.
  30.     // Get the local file as an array buffer.
  31.     var getFile = getFileBuffer();
  32.     getFile.done(function (arrayBuffer) {
  34.         // Add the file to the SharePoint folder.
  35.         var addFile = addFileToFolder(arrayBuffer);
  36.         addFile.done(function (file, status, xhr) {
  38.             // Get the list item that corresponds to the uploaded file.
  39.             var getItem = getListItem(file.d.ListItemAllFields.__deferred.uri);
  40.             getItem.done(function (listItem, status, xhr) {
  42.                 // Change the display name and title of the list item.
  43.                 var changeItem = updateListItem(listItem.d.__metadata);
  44.                 changeItem.done(function (data, status, xhr) {
  45.                     alert('file uploaded and updated');
  46.                 });
  47.                 changeItem.fail(onError);
  48.             });
  49.             getItem.fail(onError);
  50.         });
  51.         addFile.fail(onError);
  52.     });
  53.     getFile.fail(onError);
  55.     // Get the local file as an array buffer.
  56.     function getFileBuffer() {
  57.         var deferred = jQuery.Deferred();
  58.         var reader = new FileReader();
  59.         reader.onloadend = function (e) {
  60.             deferred.resolve(e.target.result);
  61.         }
  62.         reader.onerror = function (e) {
  63.             deferred.reject(e.target.error);
  64.         }
  65.         reader.readAsArrayBuffer(fileInput[0].files[0]);
  66.         return deferred.promise();
  67.     }
  69.     // Add the file to the file collection in the Shared Documents folder.
  70.     function addFileToFolder(arrayBuffer) {
  72.         // Get the file name from the file input control on the page.
  73.         var parts = fileInput[0].value.split('\\');
  74.         var fileName = parts[parts.length - 1];
  76.         // Construct the endpoint.
  77.         var fileCollectionEndpoint = String.format(
  78.             "{0}/_api/sp.appcontextsite(@target)/web/getfolderbyserverrelativeurl('{1}')/files" +
  79.             "/add(overwrite=true, url='{2}')?@target='{3}'",
  80.             appWebUrl, serverRelativeUrlToFolder, fileName, hostWebUrl);
  82.         // Send the request and return the response.
  83.         // This call returns the SharePoint file.
  84.         return jQuery.ajax({
  85.             url: fileCollectionEndpoint,
  86.             type: "POST",
  87.             data: arrayBuffer,
  88.             processData: false,
  89.             headers: {
  90.                 "accept": "application/json;odata=verbose",
  91.                 "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
  92.                 "content-length": arrayBuffer.byteLength
  93.             }
  94.         });
  95.     }
  97.     // Get the list item that corresponds to the file by calling the file's ListItemAllFields property.
  98.     function getListItem(fileListItemUri) {
  100.         // Construct the endpoint.
  101.         // The list item URI uses the host web, but the cross-domain call is sent to the
  102.         // add-in web and specifies the host web as the context site.
  103.         fileListItemUri = fileListItemUri.replace(hostWebUrl, '{0}');
  104.         fileListItemUri = fileListItemUri.replace('_api/Web', '_api/sp.appcontextsite(@target)/web');
  106.         var listItemAllFieldsEndpoint = String.format(fileListItemUri + "?@target='{1}'",
  107.             appWebUrl, hostWebUrl);
  109.         // Send the request and return the response.
  110.         return jQuery.ajax({
  111.             url: listItemAllFieldsEndpoint,
  112.             type: "GET",
  113.             headers: { "accept": "application/json;odata=verbose" }
  114.         });
  115.     }
  117.     // Change the display name and title of the list item.
  118.     function updateListItem(itemMetadata) {
  120.         // Construct the endpoint.
  121.         // Specify the host web as the context site.
  122.         var listItemUri = itemMetadata.uri.replace('_api/Web', '_api/sp.appcontextsite(@target)/web');
  123.         var listItemEndpoint = String.format(listItemUri + "?@target='{0}'", hostWebUrl);
  125.         // Define the list item changes. Use the FileLeafRef property to change the display name. 
  126.         // For simplicity, also use the name as the title.
  127.         // The example gets the list item type from the item's metadata, but you can also get it from the
  128.         // ListItemEntityTypeFullName property of the list.
  129.         var body = String.format("{
  130.    {'__metadata':{
  131.    {'type':'{0}'}},'FileLeafRef':'{1}','Title':'{2}'}}",
  132.             itemMetadata.type, newName, newName);
  134.         // Send the request and return the promise.
  135.         // This call does not return response content from the server.
  136.         return jQuery.ajax({
  137.             url: listItemEndpoint,
  138.             type: "POST",
  139.             data: body,
  140.             headers: {
  141.                 "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
  142.                 "content-type": "application/json;odata=verbose",
  143.                 "content-length": body.length,
  144.                 "IF-MATCH": itemMetadata.etag,
  145.                 "X-HTTP-Method": "MERGE"
  146.             }
  147.         });
  148.     }
  149. }
  151. // Display error messages. 
  152. function onError(error) {
  153.     alert(error.responseText);
  154. }
  156. // Get parameters from the query string.
  157. // For production purposes you may want to use a library to handle the query string.
  158. function getQueryStringParameter(paramToRetrieve) {
  159.     var params = document.URL.split("?")[1].split("&");
  160.     for (var i = 0; i < params.length; i = i + 1) {
  161.         var singleParam = params[i].split("=");
  162.         if (singleParam[0] == paramToRetrieve) return singleParam[1];
  163.     }
  164. }

代码示例二：使用REST API和jQuery将文件上传到同域网站

  1. 'use strict';
  3. jQuery(document).ready(function () {
  5.     // Check for FileReader API (HTML5) support.
  6.     if (!window.FileReader) {
  7.         alert('This browser does not support the FileReader API.');
  8.     }
  9. });
  11. // Upload the file.
  12. // You can upload files up to 2 GB with the REST API.
  13. function uploadFile() {
  15.     // Define the folder path for this example.
  16.     var serverRelativeUrlToFolder = '/shared documents';
  18.     // Get test values from the file input and text input page controls.
  19.     var fileInput = jQuery('#getFile');
  20.     var newName = jQuery('#displayName').val();
  22.     // Get the server URL.
  23.     var serverUrl = _spPageContextInfo.webAbsoluteUrl;
  25.     // Initiate method calls using jQuery promises.
  26.     // Get the local file as an array buffer.
  27.     var getFile = getFileBuffer();
  28.     getFile.done(function (arrayBuffer) {
  30.         // Add the file to the SharePoint folder.
  31.         var addFile = addFileToFolder(arrayBuffer);
  32.         addFile.done(function (file, status, xhr) {
  34.             // Get the list item that corresponds to the uploaded file.
  35.             var getItem = getListItem(file.d.ListItemAllFields.__deferred.uri);
  36.             getItem.done(function (listItem, status, xhr) {
  38.                 // Change the display name and title of the list item.
  39.                 var changeItem = updateListItem(listItem.d.__metadata);
  40.                 changeItem.done(function (data, status, xhr) {
  41.                     alert('file uploaded and updated');
  42.                 });
  43.                 changeItem.fail(onError);
  44.             });
  45.             getItem.fail(onError);
  46.         });
  47.         addFile.fail(onError);
  48.     });
  49.     getFile.fail(onError);
  51.     // Get the local file as an array buffer.
  52.     function getFileBuffer() {
  53.         var deferred = jQuery.Deferred();
  54.         var reader = new FileReader();
  55.         reader.onloadend = function (e) {
  56.             deferred.resolve(e.target.result);
  57.         }
  58.         reader.onerror = function (e) {
  59.             deferred.reject(e.target.error);
  60.         }
  61.         reader.readAsArrayBuffer(fileInput[0].files[0]);
  62.         return deferred.promise();
  63.     }
  65.     // Add the file to the file collection in the Shared Documents folder.
  66.     function addFileToFolder(arrayBuffer) {
  68.         // Get the file name from the file input control on the page.
  69.         var parts = fileInput[0].value.split('\\');
  70.         var fileName = parts[parts.length - 1];
  72.         // Construct the endpoint.
  73.         var fileCollectionEndpoint = String.format(
  74.                 "{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files" +
  75.                 "/add(overwrite=true, url='{2}')",
  76.                 serverUrl, serverRelativeUrlToFolder, fileName);
  78.         // Send the request and return the response.
  79.         // This call returns the SharePoint file.
  80.         return jQuery.ajax({
  81.             url: fileCollectionEndpoint,
  82.             type: "POST",
  83.             data: arrayBuffer,
  84.             processData: false,
  85.             headers: {
  86.                 "accept": "application/json;odata=verbose",
  87.                 "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
  88.                 "content-length": arrayBuffer.byteLength
  89.             }
  90.         });
  91.     }
  93.     // Get the list item that corresponds to the file by calling the file's ListItemAllFields property.
  94.     function getListItem(fileListItemUri) {
  96.         // Send the request and return the response.
  97.         return jQuery.ajax({
  98.             url: fileListItemUri,
  99.             type: "GET",
  100.             headers: { "accept": "application/json;odata=verbose" }
  101.         });
  102.     }
  104.     // Change the display name and title of the list item.
  105.     function updateListItem(itemMetadata) {
  107.         // Define the list item changes. Use the FileLeafRef property to change the display name. 
  108.         // For simplicity, also use the name as the title. 
  109.         // The example gets the list item type from the item's metadata, but you can also get it from the
  110.         // ListItemEntityTypeFullName property of the list.
  111.         var body = String.format("{
  112.    {'__metadata':{
  113.    {'type':'{0}'}},'FileLeafRef':'{1}','Title':'{2}'}}",
  114.             itemMetadata.type, newName, newName);
  116.         // Send the request and return the promise.
  117.         // This call does not return response content from the server.
  118.         return jQuery.ajax({
  119.             url: itemMetadata.uri,
  120.             type: "POST",
  121.             data: body,
  122.             headers: {
  123.                 "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
  124.                 "content-type": "application/json;odata=verbose",
  125.                 "content-length": body.length,
  126.                 "IF-MATCH": itemMetadata.etag,
  127.                 "X-HTTP-Method": "MERGE"
  128.             }
  129.         });
  130.     }
  131. }
  133. // Display error messages. 
  134. function onError(error) {
  135.     alert(error.responseText);
  136. }

本篇就到这里。

发表评论

表情：
评论列表 （有 0 条评论，301人围观）

还没有评论，来说两句吧...

相关阅读

    相关 restful api

    简介 一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实

    短命女短命女/ 0 赞/ 372 阅读