SharePoint 2010文件上传求助：新手操作难题及文档需求

Hey Roberto, let's walk through how to get file upload working using only the HTML editor's source mode—since you're new to SharePoint 2010, I'll keep this step-by-step and include the official docs references you asked for.

Step 1: Add the File Selection UI #

First, drop this HTML into your HTML editor's source view. It adds a file picker, upload button, and a status area to show results:

<input type="file" id="fileInput" accept="*/*" />
<button onclick="uploadFile()">Upload to SharePoint</button>
<div id="uploadStatus" style="margin-top:10px;color:blue;"></div>

Step 2: Add the Upload Logic with SharePoint JSOM #

Next, add this JavaScript right after the HTML above. This uses SharePoint's JavaScript Client Object Model (JSOM)—the official way to interact with SharePoint via client-side code:

function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const statusDiv = document.getElementById('uploadStatus');
    const selectedFile = fileInput.files[0];

    // Check if a file was selected
    if (!selectedFile) {
        statusDiv.textContent = "Please pick a file first!";
        return;
    }

    // Initialize SharePoint context
    const clientContext = SP.ClientContext.get_current();
    const targetWeb = clientContext.get_web();
    // Replace 'Documents' with your actual document library name
    const targetLibrary = targetWeb.get_lists().getByTitle('Documents');

    // Set up file upload details
    const fileCreateInfo = new SP.FileCreationInformation();
    fileCreateInfo.set_content(new SP.Base64EncodedByteArray());
    fileCreateInfo.set_url(selectedFile.name);
    fileCreateInfo.set_overwrite(true); // Set to false if you don't want to overwrite existing files

    // Read file content as array buffer
    const fileReader = new FileReader();
    fileReader.onload = function(event) {
        const arrayBuffer = event.target.result;
        const byteArray = new Uint8Array(arrayBuffer);
        
        // Populate the Base64 array with file bytes
        for (let i = 0; i < byteArray.length; i++) {
            fileCreateInfo.get_content().append(byteArray[i]);
        }

        // Upload the file to the library's root folder
        const uploadedFile = targetLibrary.get_rootFolder().get_files().add(fileCreateInfo);
        clientContext.load(uploadedFile);

        // Execute the upload request
        clientContext.executeQueryAsync(
            // Success callback
            function() {
                statusDiv.textContent = `Success! File uploaded to: ${uploadedFile.get_serverRelativeUrl()}`;
            },
            // Error callback
            function(sender, args) {
                statusDiv.textContent = `Upload failed: ${args.get_message()}`;
            }
        );
    };

    fileReader.readAsArrayBuffer(selectedFile);
}

// Ensure SharePoint's JSOM library loads before our code runs
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
    console.log("SharePoint JSOM is ready for uploads");
});

Key Notes to Make This Work #

• Replace the Library Name: Swap 'Documents' with the exact title of your SharePoint document library (check the library's settings if you're unsure).
• Permissions: Make sure your user account has Edit or Contribute permissions on the target library—without this, the upload will fail with a permission error.
• Browser Support: This uses HTML5's FileReader, which works in IE10+, Chrome, Firefox, and Safari. If you're stuck with IE8 (common in 2010 environments), you'll need a different approach using ActiveX, but that's less secure and more limited.

Official SharePoint 2010 Docs References #

To dig deeper and tweak this code, look up these official Microsoft documentation topics (search the exact terms on Microsoft Docs):

• SP.ClientContext Class: The core object for accessing SharePoint site data client-side.
• SP.FileCreationInformation Class: Defines the properties needed to create/upload a file.
• SP.Folder.Files.Add Method: The method that actually adds the file to the library folder.
• JavaScript Client Object Model Overview for SharePoint 2010: A high-level guide to using JSOM with SharePoint 2010.

内容的提问来源于stack exchange，提问作者Roberto Flores