我需要向 SharePoint 应用程序添加拖放功能以上传文件。
我想使用 dropzone.js因为它已经具备了所需的大部分功能。
一切都必须在浏览器中处理，使用 SharePoint Services SOAP AJAX 库。
放置文件应该会自动将它们加载到 SharePoint 文档库中。
最佳答案
将 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关于javascript - 如何使用 dropzone.js 将文件上传到使用 SPServices 的 SharePoint 文件库？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44268888/