معرفی
در مقاله قبلی، چندین پیوست را به مورد جدید در یک لیست با استفاده از JSOM و REST API بررسی کردهایم . در این مقاله، خواهیم دید که چگونه میتوانیم اسناد را با استفاده از رویکرد مبتنی بر REST API در موارد فهرست شیرپوینت آپلود کنیم.
تا به حال، من همه را دیده ام که در وبلاگ می نویسند و مقالاتی را ارسال می کنند، جایی که از رویکرد کدگذاری سخت شناسه مورد و ارسال آن به REST API و آپلود پیروی می کنند. اما در این مقاله یک آیتم جدید ایجاد می کنیم و شناسه موردی که در ضمیمه قرار داده ایم.
راهنمای گام به گام زیر را بررسی کنید.
مراحل
قطعه کد زیر HTML جزئیات شخصی را نشان می دهد که برای کاربر ایجاد شده است تا داده ها را در لیست درج کند. در HTML، یک تگ برجسته می شود تا کنترل آپلود چند فایل را تسهیل کند. من از پلاگین "jquery.multifile.js" استفاده می کنم. اگر از آن افزونه استفاده نکنیم، کاربر میتواند هر بار فقط یک فایل ورودی را برای آپلود فقط یک فایل انتخاب کند.
- <script type="text/javascript" src="/Script/jquery-1.10.2.js"></script>
- <script type="text/javascript" src="/Script/jquery-ui.js"></script>
- <script type="text/javascript" src="/_layouts/15/sp.js"></script>
- <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
- <script type="text/javascript" src="/Script/jquery.multifile.js"></script>
- <span style="font-size: 22.0pt;padding-left:20px">Personal Details<o:p></o:p></span>
- <table align="left" border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" width="0" id="mytable">
- <tbody>
- <tr>
- <td >
- <table align="left" border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style=""><tbody><tr><td style="" valign="top" class="auto-style16"><h3> Name</h3></td>
- <td valign="top" style="padding:9px;" class="auto-style17">
- <input type="text" value="" maxlength="255" id="Name" title="Name" style="width: 96%;" class="ms-long ms-spellcheck-true">
- </td></tr><tr >
- <td class="auto-style16"><h3> Address</h3> </td><td class="auto-style17">
- <input type="text" value="" maxlength="255" id=" Address" title="Address" style="ime-mode :;width: 96%;" class="ms-long ms-spellcheck-true"></td></tr><tr><td class="auto-style15"><h3 >City</h3></td>
- <td class="auto-style4"><input type="text" value="" maxlength="255" id=" City " title=" City " style=";width: 96%;" class="ms-long ms-spellcheck-true"></td></tr><tr><td class="auto-style15"><h3 >
- Contact Number </h3></td>
- <td class="auto-style5"><input type="text" value="" maxlength="255" id=" ContactNumber " title="ContactNumber" style="ime-mode :;width: 96%;" class="ms-long ms-spellcheck-true"></td></tr></tbody></table><table ><tbody>
- <tr ><td ><span style="font-family: " segoe ui" ,sans-serif; color: #444444">Click here to attach file</span> <div class="files" id="attachFilesHolder ">
- <input id="file_input" type="file" name="files[]">
- </div>
- </td><td></td></tr></tbody></table>
- <div style="TEXT-ALIGN: -webkit-center; padding-bottom: 20px; padding-top: 20px; padding-left:190px"><input name="SaveItem" style=" height: 40px; font-size: 15px;" class="ms-ButtonHeightWidth" id=" NewSaveItem " accesskey="O" onclick="" type="button" value="Click here to submit " target="_self"></div>
- </tbody></table>
مرحله 1
به سایت SharePoint 2013 خود بروید.
مرحله 2
از این صفحه، Site Actions | را انتخاب کنید ویرایش صفحه.
صفحه را ویرایش کنید، به تب Insert در نوار بروید و گزینه Web Part را کلیک کنید. در قسمت انتخابگر Web Parts، به دسته «رسانه و محتوا» بروید، «بخش وب ویرایشگر اسکریپت» را انتخاب کنید و دکمه «افزودن» را فشار دهید.
مرحله 3
هنگامی که بخش وب در صفحه درج شد، پیوند "EDIT SNIPPET" را مشاهده خواهید کرد. روی آن کلیک کنید. می توانید HTML و/یا جاوا اسکریپت را مانند شکل زیر وارد کنید.
- <script type="text/javascript">
- var arraycount = 0;
- var fileUploadeCount = 0;
- $(document).ready(function ($) {
- $('#file_input').multifile();
- $("#NewSaveItem").click(function () { formSave() });
- });
- function formSave() {
- var listItem = "";
- var fileArray = [];
- $("#attachFilesHolder input:file").each(function () {
- if ($(this)[0].files[0]) {
- fileArray.push({ "Attachment": $(this)[0].files[0] });
- }
- });
- arraycount = fileArray.length;
- listItem = {
- __metadata: { "type": "SP.Data.BankDetailsListItem" },
- "Name": $("input[title='Name']").val(),
- "Address ": $("input[title='Address']").val(),
- "City": $("input[title= City]").val(),
- "ContactNumber": $("input[title='ContactNumber']").val(),
- "Files": fileArray
- };
- createItemparent("BankDetails", filesarray, listItem);
- }
- function createNewItem(listname, filearray, listItem) {
- var dfd = $.Deferred();
- var initializePermsCall = PostAjax(_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('" + listname + "')/items", listItem);
- $.when(initializePermsCall).then(function (permData) {
- var id = permData.d.Id;
- if (filearray.length != 0) {
- for (i = 0; i <= filearray.length - 1; i++) {
- loopFileUpload(listname, id, filearray, i).then(
- function () {
- },
- function (sender, args) {
- console.log("Error uploading");
- dfd.reject(sender, args);
- }
- );
- }
- }
- });
- }
- function PostAjax(siteurl, listItem) {
- return $.ajax({
- url: siteurl,
- type: "POST",
- contentType: "application/json;odata=verbose",
- data: JSON.stringify(listItem),
- headers: {
- "Accept": "application/json;odata=verbose",
- "X-RequestDigest": $("#__REQUESTDIGEST").val()
- }
- });
- }
- function loopFileUpload(listName, id, filearray, fileCount) {
- var dfd = $.Deferred();
- uploadFile(listName, id, filearray[fileCount].Attachment); return dfd.promise();
- }
- function uploadFile(listname, ID, file) {
- var getFileBuffer = function (file) {
- var deferred = $.Deferred();
- var reader = new FileReader();
- reader.onload = function (e) {
- deferred.resolve(e.target.result);
- }
- reader.onerror = function (e) {
- deferred.reject(e.target.error);
- }
- reader.readAsArrayBuffer(file);
- return deferred.promise();
- };
- getFileBuffer(file).then(function (buffer) {
- $.ajax({
- url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listname + "')/items(" + ID + ")/AttachmentFiles/add(FileName='" + file.name + "')",
- method: 'POST',
- async: false,
- data: buffer,
- processData: false,
- headers: {
- "Accept": "application/json; odata=verbose",
- "content-type": "application/json; odata=verbose",
- "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value
- }, success: onAttachmentSucess
- });
- });
- function onAttachmentSucess() {
- fileUploadeCount++;
- if (arraycount == fileUploadeCount) {
- console.log(data + ' uploaded successfully');
- }
- }
- }
- /script>
O/P نهایی