自定义图片点击, 上传文件

本文是用angularjs框架和$resource组件实现的,不过原理都是大同小异
注意重点: 设置请求的Content-Type头为undefined.
Angularjs 对于post和put请求, 默认的Content-Type是application/json, w我们需要改变它的值. 通过设置Content-Type为undefined, 浏览器会设置Content-Type为multipart/form-data, 并且会自动填充正确的分界(boundary).
手动设定Content-Type为multipart/form-data , 会导致请求的分界参数填充失败.

可以参考这个链接
http://blog.csdn.net/five3/article/details/7181521

html

    <!--添加图片-->
    <div style="margin-top: 2rem;">
      <div style="padding: 1rem 0;"><p>添加图片</p></div>
      <div style="display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; height: 14rem;">
        <div class="images_upload" ng-repeat="image in uploadedImages track by $index" ng-click="removeImage(image)"
          style="background-image: url({{image}}); ">
        </div>

        <div class="images_upload" onclick="document.getElementById('uploadImage').click()" ng-if="uploadedImages.length< 8"
          style="background-image: url(img/orders/jh@2x.png); background-size: inherit;">
        </div>
        <input id="uploadImage"  type="file" accept="image/*" multiple="true" style="display: none;">
      </div>
    </div>

js_controller

    var isUploading = false;
    //选取图片绑定时事件
    var uploadedButton = document.getElementById('uploadImage');
    uploadedButton.onchange = function()
    {
      //发请求
      isUploading = true;
      var formData = new FormData();
      for(var index=0; index<uploadedButton.files.length; index++)
      {
        if (index+$scope.uploadedImages.length >= 8)
        {
          break;
        }
        formData.append('file', uploadedButton.files[index]);
      }

      //接口上传
      buyerOrderService.uploadPictures(formData).then(
        function(data)
        {
          isUploading = false;
          utilsService.console_info(data, '图片返回数据:');

          if (!data || !data instanceof Array)
          {
            utilsService.console_error(data, '图片返回数据不规格;');
            return;
          }
          //页面展示
          for(var index=0; index<data.length; index++)
          {
            $scope.uploadedImages.push(data[index].data);
          }
        },
        function(error)
        {
          isUploading = false;
          utilsService.alert({template: '<a>图片上传失败,请稍后尝试</a>'})
        });
    };

    //删除图片
    $scope.removeImage = function(imageUrl)
    {
      $scope.uploadedImages.splice($scope.uploadedImages.indexOf(imageUrl), 1);
    };

js_service

      //resource的配置: 
      uploadPictures: {
        url: requestUrl + '/upload/batch.do',/*/upload.do*/
        isArray: true,
        method: 'POST',
        //这个很重要,必须加上
        headers: {'Content-Type': undefined}
      }

   /**
     * 上传图片
     */
    service.uploadPictures = function(params)
    {
      return resource.uploadPictures(params).$promise;
    };