如何在jQuery上发布angularjs中没有ajax的文件？

我想建立一个画廊，其中多个图像可以上传。我找到了一些解决方案，但他们都使用ajax立即发送文件。但我想通过提交表格的方式发布它们

我还想显示将要上传的文件的缩略图

有可能吗？

您可以使用

<form ng-submit="uploadFile()" class="form-horizontal" enctype="multipart/form-data">
                <input type="text" name="username" ng-model="userName"/>
               <input type="file" name="image" ng-model="document.fileInput" id="file"  />
               <input type="file" name="docu" ng-model="document.fileInputTwo" id="fileTwo"  />
               <input type="text" class="col-sm-4" ng-model="document.title" id="title" />
               <button class="btn btn-primary" type="submit">
                     Submit
                </button>
            </form>

在这里，单击按钮调用uploadFile（）方法，即表单提交。 根据缩略图，您需要使用FileReader HTML5 API。

示例基于

var MyCtrl=['$scope'，'$upload'，函数（$scope，$upload）{
$scope.onFileSelect=函数（$files）{
//$files：选定文件的数组，每个文件都有名称、大小和类型。
$scope.files=$files；
}
$scope.callMeLater=函数（）{
var$files=$scope.files；
对于（变量i=0；i<$files.length；i++）{
var file=$files[i]；
$scope.upload=$upload.upload({
url:'server/upload/url'、//upload.php脚本、node.js路由或servlet url
//方法：“POST”或“PUT”，
//标题：{'header-key'：'header-value'}，
//事实上，
数据：{myObj:$scope.myModelObj}，
file:file、//或文件列表：$仅适用于html5的文件
/*设置文件formData名称（“Content-Deposition”）。默认值为“file”*/
//fileFormDataName:myFile，//或多个文件的名称列表（html5）。
/*自定义如何将数据添加到formData。有关示例代码，请参见#40#issuecomment-28612000*/
//formDataAppender:函数（formData，键，val）{}
}).进度（功能（evt）{
log（'percent:'+parseInt（100.0*evt.loaded/evt.total））；
}).success（函数（数据、状态、标题、配置）{
//文件已成功上载
控制台日志（数据）；
});
//.错误（…）
//.然后（成功、错误、进展）；
//.xhr（函数（xhr）{xhr.upload.addEventListener（…）}）//访问任何事件侦听器并将其附加到XMLHttpRequest。
}
/*另一种上传方式是，发送带有文件内容类型的二进制文件。
可以用来上传文件到CouchDB，imgur等…需要html5文件阅读器。
它还可以用于监视具有大数据量的正常http post/put请求的进度*/
//$scope.upload=$upload.http（{…}）有关示例代码，请参见88#issuecomment-31366487。
};
}];

True form submission意味着页面重定向会破坏SPA，您真的想要这样吗？angular file upload（角度文件上传）指令允许您等待上传文件，如果您只想上传文件，它们也会排队。是@shaunhusain，我需要在保存一些其他数据后保存图像。查看示例代码，onFileSelect您可以将for循环从那里取出，并将其放入稍后调用的另一个函数中，只需存储传入的文件数组，以便您调用以上载它们。我已经检查了它，但它会立即发送文件。我遗漏了什么吗？是的，不要依赖于你在演示中看到的行为看看链接中的示例JS代码。onFileSelect是一个被调用并传递一个文件数组的函数，然后它会立即执行for循环来上载这些文件，只是不要以相同的方式执行该部分，而是存储传入的数组，然后再执行上载文件的循环

$scope.uploadFile = function() {

                    var formData=new FormData();
                    console.log(file);               
                    formData.append("file",file.files[0]);
                    formData.append("docu", fileTwo.files[0]);                  
                    formData.append("name", $scope.userName);

                    $http({
                          method: 'POST',
                          url: 'rest/newDocument',
                          headers: { 'Content-Type': undefined},
                          data:  formData,
                          transformRequest: function(data, headersGetterFunction) {
                            return data; // do nothing! FormData is very good!
                        }
                    })
                    .success(function(data, status) {                       
                            alert("Success ... " + status);
                    })
                    .error(function(data, status) {
                            alert("Error ... " + status);
                    });
              };

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    $scope.files = $files;
  }
  $scope.callMeLater = function(){
    var $files = $scope.files;
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        // method: 'POST' or 'PUT',
        // headers: {'header-key': 'header-value'},
        // withCredentials: true,
        data: {myObj: $scope.myModelObj},
        file: file, // or list of files: $files for html5 only
        /* set the file formData name ('Content-Desposition'). Default is 'file' */
        //fileFormDataName: myFile, //or a list of names for multiple files (html5).
        /* customize how data is added to formData. See #40#issuecomment-28612000 for sample code */
        //formDataAppender: function(formData, key, val){}
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      });
      //.error(...)
      //.then(success, error, progress); 
      //.xhr(function(xhr){xhr.upload.addEventListener(...)})// access and attach any event listener to XMLHttpRequest.
    }
    /* alternative way of uploading, send the file binary with the file's content-type.
       Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed. 
       It could also be used to monitor the progress of a normal http post/put request with large data*/
    // $scope.upload = $upload.http({...})  see 88#issuecomment-31366487 for sample code.
  };
}];