如何使用SPServices使用dropzone.js将文件上传到SharePoint文件库？
[英]How can I use dropzone.js to upload files to a SharePoint file Library using SPServices?
问题描述
I need to add drag and drop functionality to a SharePoint application for uploading files. 
我需要将拖放功能添加到SharePoint应用程序中以上传文件。
I'd like to use dropzone.js as it already has much of the functionality needed. 我想使用dropzone.js，因为它已经具有所需的许多功能。
Everything must be handled in the browser, using SharePoint Services SOAP AJAX library. 必须使用SharePoint Services SOAP AJAX库在浏览器中处理所有事情。
Dropping files should automatically load them into a SharePoint Document Library. 删除文件应自动将它们加载到SharePoint文档库中。
1 个解决方案
解决方案1
1 2017-05-30 20:48:34
Using Dropzone.js with SharePoint Services to upload files to a SharePoint Library. 将Dropzone.js与SharePoint Services一起使用可将文件上传到SharePoint库。
This should work with IE 10+ 这应该适用于IE 10+
First, the HTML: 首先，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>
Notice this bit right after including dropzone.js: 在包含dropzone.js之后，请注意以下几点：
Dropzone.autoDiscover = false;
It seems to work best when immediately stipulated like this. 像这样立即规定时，似乎效果最好。
The JavaScript: 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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.