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

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

---

这个场景可以工作吗？我非常感谢您的建议。

这是我经过测试的代码

<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>

.dropable{
背景：#08c；
颜色：#fff；
填充：100px0；
文本对齐：居中；
}
.dropable.dragover{
背景：#00CC71；
}
函数makeDropable（元素，回调）{
var input=document.createElement（'input'）；
input.setAttribute（'type'，'file'）；
setAttribute（'id'，'dragdropContent'）；
input.setAttribute（'multiple'，true）；
input.style.display='none'；
input.addEventListener（'change'，triggerCallback）；
元素。追加子元素（输入）；
元素。addEventListener（'dragover'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
element.classList.add（'dragover'）；
});
元素。addEventListener（'dragleave'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
element.classList.remove（'dragover'）；
});
元素。addEventListener（'drop'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
element.classList.remove（'dragover'）；
触发器（e）；
});
元素。addEventListener（'click'，函数（）{
input.value=null；
输入。单击（）；
});
函数触发器回调（e）{
var文件；
如果（如数据传输）{
files=e.dataTransfer.files；
}否则，如果（如目标）{
files=e.target.files；
}
callback.call（null，文件）；
}
}
$（函数（）{
String.prototype.format=函数（）{
var args=[].slice.call（参数）；
返回这个。replace（/（\{\d+\}）/g，函数（a）{
返回args[+（a.substr（1，a.length-2））| | 0]；
});
};
var元素=document.querySelector（'.dropable'）；
函数回调（文件）{
//在这里，我们只需将文件数组记录到控制台。
//console.log（文件）；
var fileName=文件[0]。名称；
//构造端点。mydoc是文档库名称
var reader=new FileReader（）；
reader.file=文件[0]；
reader.onload=函数（事件）{
var arrayBuffer=event.target.result；
//var fileData=''；
//var byteArray=新的UINT8阵列（arrayBuffer）；
//对于（变量i=0；i

更新：

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

---

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

newform始终是一个问题，因为没有项目yetcombine，非常感谢您的建议-您能给我一个关于如何将这两者结合起来的提示吗，因为我对这个游戏相当陌生…非常感谢您的代码-不幸的是，我无法在区域中拖放/上载对象，因为我已经知道了“错误：未定义“。这在自定义列表以及任务列表表单中发生。。。你知道是什么导致了这种行为吗？你能告诉我，为什么你的代码中的某些控件被禁用了吗？mydoc是我的测试文档库名称，你需要更新它。为了将文件直接附加到创建的列表项，我应该使用哪个路径来代替文档库？