如何使用 dropzone.js 将文件上传到使用 SPServices 的 SharePoint 文件库？答案

【问题标题】：How can I use dropzone.js to upload files to a SharePoint file Library using SPServices?如何使用 dropzone.js 将文件上传到使用 SPServices 的 SharePoint 文件库？
【发布时间】：2017-10-31 07:42:17
【问题描述】：

我需要向 SharePoint 应用程序添加拖放功能以上传文件。

我想使用dropzone.js，因为它已经具备了很多所需的功能。

一切都必须在浏览器中处理，使用SharePoint Services SOAP AJAX 库。

删除文件应自动将它们加载到 SharePoint 文档库中。

【问题讨论】：

标签： javascript drag-and-drop sharepoint-2010 dropzone.js spservices

【解决方案1】：

将 Dropzone.js 与 SharePoint Services 结合使用，将文件上传到 SharePoint 库。

这应该适用于 IE 10+

首先，HTML：

<!doctype html>
<html>
<head>
  <title>SharePoint Services w/ DropZone.js</title>
  <link rel="stylesheet" type="text/css" href="/sites/test_acme_development/acmeApps/Lib/dropzone/dropzone.css">
</head>
<body>

  <div id="dz" class='dropzone'></div>
  <div id="message"></div>

<script type="text/javascript" src="/sites/test_acme_development/acmeApps/Lib/jquery1.11.3/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/sites/test_acme_development/acmeApps/Lib/SPServices2014.02/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript" src="/sites/test_acme_development/acmeApps/Lib/dropzone/dropzone.js"></script>
<script type="text/javascript"> Dropzone.autoDiscover = false; /* Prevent Dropzone from doing auto stuff */ </script>
<script type="text/javascript" src="/sites/test_acme_development/acmeApps/App/uploadApp/js/upload.js"></script>

</body>
</html>

在包含 dropzone.js 之后立即注意这一点：

Dropzone.autoDiscover = false;

立即这样规定似乎效果最好。

JavaScript：

(function (app, $, undefined) { }(window.app = window.app || {}, jQuery)); // setup app namespace

window.onload = function(e) { app.init(e); };

app.init = function(e) {
	
  app.siteURL = 'https://portal.acme.com';
  app.clientPath = '/sites/test_acme_development/';
  app.fileLib = 'MySPLibrary';

  app.loadDropzone();
	
};

app.loadDropzone = function() {
	
  var dz = new Dropzone(document.getElementById("dz"), {
    url: window.location.href,
    autoProcessQueue: true,
    uploadMultiple: true,
    dictDefaultMessage: 'Drop files here or Click to select...'
  });

  dz.on("sendingmultiple", function(files, xhr, formData) { 
    for (var i = 0; i < files.length; i++) {
      app.singleUpload(files[i], function() { /* upload done */	});
    }
  });
	
  dz.on("queuecomplete", function () {
    $('#message').html('Waiting for SharePoint to digest your files...').css('color', 'darkgreen');
    setTimeout(function () {
      $('#message').html('Done Loading Files into SharePoint...').css('color', 'darkgreen');
        /* Continue doing stuff */
    }, 8500);
  });

};

app.singleUpload = function (readFile, cb) {

  var reader = new FileReader();
  var currFile = readFile;
  reader.readAsArrayBuffer(currFile);

  reader.onload = (function (theFile) { // (IIFE) Immediately-Invoked Function Expression
    
    return function (e) {
      var fileStream = app.aryBufferToBase64(e.target.result);
      var destUrl = ['{0}{1}{2}/{3}'.f(app.siteURL, app.clientPath, app.fileLib, theFile.name)];

      $().SPServices({
        operation: "CopyIntoItems",
        SourceUrl: null,
        DestinationUrls: destUrl,
        Stream: fileStream,
        Fields: [],
        completefunc: function (xData, Status) {
          var err = $(xData.responseXML).find("CopyResult").first().attr("ErrorCode");
          if (err && err === "Success") {
            cb();
          } else {
            $('#message').html('Error: SharePoint Services failed during "singleUpload" process.').css('color', 'darkred');
          }
        }
      });
    };

  })(currFile);

};

app.aryBufferToBase64 = function(buffer) {
  var binary = '';
  var bytes = new Uint8Array(buffer);
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
};

String.prototype.f = function () { var args = arguments; return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; }); }; // like .net's string.format() function

【讨论】：