FineUploader JS库无法上传文件及进度获取问题求助

Let's walk through your FineUploader issues one by one—you’ve got a couple of key problems to solve here, so we’ll start with the most pressing (upload failure) and work our way through progress tracking and form data handling.

First, that console log [Fine Uploader 5.16.0] Attaching to form element tells me your frontend is correctly binding to your form, so the issue is likely on the backend or in your request configuration. Here’s what to check:

• Verify your endpoint & backend logic: Double-check that your request.endpoint in FineUploader points to the correct server route. On the server side, ensure your code explicitly saves the uploaded file to your target directory (e.g., using move_uploaded_file() in PHP, or File.Move() in C#).
• Check directory permissions: Your server’s target directory must have write permissions for the user running the web server (e.g., www-data on Linux, IIS_IUSRS on Windows). Without this, the server can’t save the file even if the request succeeds.
• Inspect network requests: Open your browser’s DevTools > Network tab, trigger an upload, and look at the POST request. Check:
  • The response status code (500 = server error, 404 = missing endpoint, 403 = permission denied)
  • The response body for explicit error messages from your backend

Since you have a custom UI, you can pass static or dynamic form data to your uploads using FineUploader’s built-in options:

Static Form Data (fixed values) #

var uploader = new qq.FineUploader({
    element: document.getElementById('uploadForm'),
    request: {
        endpoint: '/your-upload-endpoint',
        params: {
            // Add static fields here (e.g., user ID, form context)
            projectId: 'abc123',
            uploadType: 'document'
        }
    },
    autoUpload: false // Disable auto-upload if you want to trigger manually after form input
});

Dynamic Form Data (from custom UI inputs) #

Use the onSubmit callback to pull values from your custom form fields right before upload:

callbacks: {
    onSubmit: function(id, fileName) {
        // Get values from your custom UI elements
        var customerName = document.getElementById('customerName').value;
        var orderNumber = document.getElementById('orderNumber').value;
        
        // Attach dynamic params to this specific upload
        this.setParams({
            customerName: customerName,
            orderNumber: orderNumber
        }, id);
    }
}

Note: Your form’s enctype="multipart/form-data" is already correct—this is required for file uploads with form data.

FineUploader provides callbacks to track every stage of the upload. Add these to your configuration to update your custom UI:

callbacks: {
    // Track real-time progress
    onProgress: function(id, fileName, uploadedBytes, totalBytes) {
        var progressPercent = Math.round((uploadedBytes / totalBytes) * 100);
        // Update your custom progress bar (e.g., a div with width set to progressPercent)
        document.getElementById(`progress-bar-${id}`).style.width = `${progressPercent}%`;
        console.log(`Uploading ${fileName}: ${progressPercent}% complete`);
    },
    // Handle individual upload completion
    onComplete: function(id, fileName, response, xhr) {
        if (response.success) {
            // Show success state in your UI
            console.log(`Success! ${fileName} uploaded.`);
        } else {
            // Show error message (pull from response or error reason)
            console.log(`Failed to upload ${fileName}: ${response.error || 'Unknown error'}`);
        }
    },
    // Handle all uploads finishing
    onAllComplete: function(successfulItems, failedItems) {
        console.log(`All uploads done. ${successfulItems.length} succeeded, ${failedItems.length} failed.`);
        // Trigger a global action (e.g., refresh file list, show summary)
    },
    // Catch explicit errors for debugging
    onError: function(id, fileName, errorReason, xhrOrXdr) {
        console.log(`Error uploading ${fileName}: ${errorReason}`);
    }
}

If you’re still stuck, add the debug: true option to your FineUploader config. This will log detailed internal events to the console, including request headers, payloads, and server responses—super helpful for pinpointing why files aren’t reaching your target directory.

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