angularjs spring rest文件上传表单答案

【问题标题】：angularjs spring rest file upload formangularjs spring rest文件上传表单
【发布时间】：2015-04-13 09:51:21
【问题描述】：

我通过以下代码上传了angularjs spring rest文件，它运行良好并保存文件，现在我想通过文件上传向html表单添加一些输入文本，如描述并保存它们我应该添加到formData的代码是什么（ ) 在角度控制器中进行此操作？

angularjs 控制器

var myDropzone = new Dropzone("div#file", 
                { url: "#"
                });
            myDropzone.on("addedfile", function(file) {
                 $scope.file=file; 

            });
     $scope.uploadFile=function(){
        var formData=new FormData();
        formData.append("file",$scope.file);
        console.log(formData)
        $http.post('/pagingpoc/app/newDocument', formData, {
            transformRequest: function(data, headersGetterFunction) {
                return data;
            },
            headers: { 'Content-Type': undefined }
            }).success(function(data, status) {                       
                console.log("Success ... " + status);
            }).error(function(data, status) {
                console.log("Error ... " + status);
            });
        $('#saveAttachmentModal').modal('hide');
  };

html表单

  <form ng-submit="uploadFile()"  enctype="multipart/form-data">

        <div class="form-group">
          <label>Description</label>
          <textarea rows="5" cols="5" ng-model="description"></textarea><br>
        </div>

        <div  id="file" class="dropzone"></div>
        <div class="modal-footer">
         <button type="button" class="btn btn-default" 
                   data-dismiss="modal" ng-click="clear()">
              <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                        </button>
          <button type="submit"  class="btn btn-primary">
                      <span class="glyphicon glyphicon-save"></span> Save
                        </button>
        </div> 
     </form>

休息控制器

      public void UploadFile(MultipartHttpServletRequest request,
                HttpServletResponse response) throws IOException {

        Attachment attachment=new Attachment();
        Iterator<String> itr=request.getFileNames();
        MultipartFile file=request.getFile(itr.next());
        String fileName=file.getOriginalFilename();
        attachment.setName(fileName);
        attachmentRepository.save(attachment);
        File dir = new File("/home/ali/");
         if (dir.isDirectory())
         {
            File serverFile = new File(dir,fileName);
           BufferedOutputStream stream = new BufferedOutputStream(
                 new FileOutputStream(serverFile));
           stream.write(file.getBytes());
           stream.close();
       }else {
        System.out.println("Error Found");
      }

 }

【问题讨论】：

标题：{enctype:'multipart/form-data'} 在您的帖子中

标签： java javascript angularjs spring-mvc dropzone.js

【解决方案1】：

控制器：

var myDropzone = new Dropzone("div#file", { url: "#"});
myDropzone.on("addedfile", function(file) {
    $scope.file=file; 
});
$scope.text = '';
$scope.uploadFile = function(){
    var formData=new FormData();
    formData.append("file",$scope.file);
    formData.append("text",$scope.text); //here
    $http.post('/pagingpoc/app/newDocument', formData, {
            transformRequest: function(data, headersGetterFunction) {
                return data;
            },
            headers: { 'Content-Type': undefined }
            }).success(function(data, status) {                       
                console.log("Success ... " + status);
            }).error(function(data, status) {
                console.log("Error ... " + status);
            });
        $('#saveAttachmentModal').modal('hide');
  };

hmlt:

描述
取消保存

【讨论】：