SharePoint 2013 - 使用拖放操作将文件附加到自定义列表

Question

在Sharepoint 2013中，是否可以将文件（.jpg，.pdf，.png）拖放到自定义列表作为附件？如果是这样，可以通过使用脚本（JS，jquery）来实现吗？因此，如果用户报告错误（NewForm.aspx），并且他将错误消息的屏幕截图保存为.jpg，我希望他能够将此文件放入表单上的放置区域。 / p>

这种情况可以运作 - 我会非常感谢你的建议吗？

Answer 1

这是我测试过的代码。

<style type="text/css">
        .droppable {
            background: #08c;
            color: #fff;
            padding: 100px 0;
            text-align: center;
        }

            .droppable.dragover {
                background: #00CC71;
            }
    </style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        function makeDroppable(element, callback) {

            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('id', 'dragdropContent');
            input.setAttribute('multiple', true);
            input.style.display = 'none';

            input.addEventListener('change', triggerCallback);
            element.appendChild(input);

            element.addEventListener('dragover', function (e) {
                e.preventDefault();
                e.stopPropagation();
                element.classList.add('dragover');
            });

            element.addEventListener('dragleave', function (e) {
                e.preventDefault();
                e.stopPropagation();
                element.classList.remove('dragover');
            });

            element.addEventListener('drop', function (e) {
                e.preventDefault();
                e.stopPropagation();
                element.classList.remove('dragover');
                triggerCallback(e);
            });

            element.addEventListener('click', function () {
                input.value = null;
                input.click();
            });

            function triggerCallback(e) {
                var files;
                if (e.dataTransfer) {
                    files = e.dataTransfer.files;
                } else if (e.target) {
                    files = e.target.files;
                }
                callback.call(null, files);
            }
        }
        $(function () {

            String.prototype.format = function () {
                var args = [].slice.call(arguments);
                return this.replace(/(\{\d+\})/g, function (a) {
                    return args[+(a.substr(1, a.length - 2)) || 0];
                });
            };

            var element = document.querySelector('.droppable');
            function callback(files) {
                // Here, we simply log the Array of files to the console.
                //console.log(files);
                var fileName = files[0].name;
                // Construct the endpoint. mydoc is document library name                

                var reader = new FileReader();
                reader.file = files[0];
                reader.onload = function (event) {
                    var arrayBuffer = event.target.result;

                    //var fileData = '';
                    //var byteArray = new Uint8Array(arrayBuffer);
                    //for (var i = 0; i < byteArray.byteLength; i++) {
                    //    fileData += String.fromCharCode(byteArray[i]);
                    //}

                    var fileEndpoint = String.format(
                        "{0}/_api/web/lists/getByTitle('{1}')/RootFolder/files" +
                        "/add(overwrite=true, url='{2}')",
                        _spPageContextInfo.webAbsoluteUrl, 'mydoc', fileName);

                     //Add the file to the SharePoint folder.
                    $.ajax({
                        url: fileEndpoint,
                        type: "POST",
                        data: arrayBuffer,//fileData,
                        processData: false,
                        headers: {
                            "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
                            "accept": "application/json;odata=verbose",
                            "content-length": arrayBuffer.byteLength,
                            //"IF-MATCH": itemMetadata.etag,
                            //"X-HTTP-Method": "MERGE"
                        },
                        success: function (data, b, c) {
                            alert('File upload succeeded.');
                        },
                        error: function (a, b, err) {
                            alert('Error: ' + err.responseText);
                        }
                    })
                };
                reader.onerror = function (e) {
                    alert(e.target.error);
                }
                var arrayBuffer = reader.readAsArrayBuffer(files[0]);                
            }
            makeDroppable(element, callback);                 
        })

    </script>

    <div class="droppable">
        <p>Drag files here or click to upload</p>
    </div>

更新

这是我的测试样本中的控件：

您可以尝试调试页面中的任何JS错误。