AngularJS 1.4页面开发：需尽快实现首部分或首图上传功能

Hey there! Let's get that upload feature sorted for your AngularJS 1.4 app. Based on the code snippet you shared, here's a straightforward implementation for uploading either the first image (#bannerImage) or a section of your page:

Option 1: Upload the First Image (#bannerImage) #

First, update the HTML in your first.html (the ng-included template) to add a file input and bind the image preview:

<!-- first.html -->
<div>
  <!-- File input for image upload -->
  <input type="file" 
         ng-change="handleImageSelect($event)" 
         accept="image/*" 
         class="image-upload-input">
  
  <!-- Preview and existing image -->
  <img id="bannerImage" 
       ng-src="{{imagePreview || 'default-banner.jpg'}}" 
       alt="Banner Image" 
       class="banner-img">
  
  <!-- Upload button -->
  <button ng-click="uploadBannerImage()" 
          ng-disabled="!selectedImage"
          class="upload-btn">Upload Image</button>
</div>

Next, update your first controller to handle file selection, preview, and upload:

angular.module('myApp').controller('first', ['$scope', '$http', function($scope, $http) {
  // Handle file selection and generate preview
  $scope.handleImageSelect = function(event) {
    const file = event.target.files[0];
    if (file && file.type.startsWith('image/')) {
      const reader = new FileReader();
      
      reader.onload = function(e) {
        $scope.$apply(() => {
          $scope.imagePreview = e.target.result;
          $scope.selectedImage = file;
        });
      };
      
      reader.readAsDataURL(file);
    } else {
      alert('Please select a valid image file!');
    }
  };

  // Upload image to backend
  $scope.uploadBannerImage = function() {
    if (!$scope.selectedImage) return;

    // Create FormData for multipart upload
    const formData = new FormData();
    formData.append('bannerImage', $scope.selectedImage);

    // Send POST request to your backend endpoint
    $http.post('/your-upload-endpoint', formData, {
      transformRequest: angular.identity,
      headers: { 'Content-Type': undefined } // Let browser set correct content type
    }).then(response => {
      // Success: Update image with uploaded URL (if returned from backend)
      $scope.imagePreview = response.data.uploadedUrl;
      alert('Image uploaded successfully!');
    }).catch(error => {
      // Error handling
      console.error('Upload failed:', error);
      alert('Oops! Image upload failed. Please try again.');
    });
  };
}]);

Option 2: Upload Partial Page Content #

If you need to upload the entire content of the first controller's section, add this function to your first controller:

$scope.uploadSectionContent = function() {
  // Get the HTML content of the first controller's container
  const sectionContent = document.querySelector('[ng-controller="first"]').innerHTML;
  
  // Send content to backend as JSON
  $http.post('/your-content-upload-endpoint', { content: sectionContent })
    .then(response => {
      alert('Section content uploaded successfully!');
    })
    .catch(error => {
      console.error('Content upload failed:', error);
      alert('Content upload failed. Please try again.');
    });
};

You can add a button in first.html to trigger this:

<button ng-click="uploadSectionContent()" class="upload-content-btn">Upload Section Content</button>

Key Notes #

• Make sure your Angular module is properly defined: angular.module('myApp', []);
• Ensure your backend endpoint is configured to accept multipart/form-data (for image uploads) or JSON (for content uploads)
• For more advanced features like upload progress or multiple files, you can use the ng-file-upload library (it’s fully compatible with AngularJS 1.4)
• Since your controllers are nested under mainController, if you need to share upload state across controllers, consider using an Angular service instead of $scope.$parent

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