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

Question

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

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

必须使用SharePoint Services SOAP AJAX库在浏览器中处理所有事情。

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

Answer 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

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

问题描述

1 个解决方案

解决方案1
1 2017-05-30 20:48:34

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

问题描述

1 个解决方案

解决方案1 1 2017-05-30 20:48:34

解决方案1
1 2017-05-30 20:48:34