asp.net-mvc-4 - AngularJs、DropZone.Js、MVC4 - 拖放和预览预上传的图像

Question

html:

<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/DropZone-2.0.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/App_Angular/app.js"></script>

<div ng-app ="myApp" ng-controller ="ProductsCtrl">
<input ng-model="product.Name"/>
<input ng-model="product.PhotoName" id="result" />
<form id="dropzone"  class="fade well">Drop files here</form>
<input type="button" value="Upload Files" ng-click="save(product)" />

Javascript：

$("#dropzone").dropzone({
    url: 'Home/UploadFiles',
    paramName: "files", // The name that will be used to transfer the file
    maxFilesize: 102, // MB
    enqueueForUpload: false,
    accept: function (file, done) {
        angular.element(document.getElementById('result')).scope()
            .$apply(function (scope) {
                scope.product.PhotoName = $('#result').val();
            });

        return done();
    }
});

function uploadClicked() {
    var dz = Dropzone.forElement("#dropzone");
    for (var i = 0; i < dz.files.length; i++) {
        dz.filesQueue.push(dz.files[i]);
    }
    dz.processQueue(dz);
    $('#innerQue').empty();
}

当在 ng-click 中调用 save 方法时，我已经能够成功地将照片名称传递给 $scope.product.PhotoName。

我无法上传图片。我不知道如何从角度调用“uploadClicked”。

任何援助将不胜感激。

Answer 1

已解决（在 Mark Rajcok 的帮助下）。

完整解决方案：

html:

<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/DropZone-2.0.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/App_Angular/app.js"></script>

<div ng-app ="myApp" ng-controller ="ProductsCtrl">
   <input ng-model="product.Name"/>
   <input ng-model="product.PhotoName" id="result" />
   <form id="dropzone"  class="fade well">Drop files here</form>
   <input type="button" value="Upload Files" ng-click="save(product)" />
</div>

Javascript：

$("#dropzone").dropzone({
    url: 'Home/UploadFiles',
    paramName: "files", // The name that will be used to transfer the file
    maxFilesize: 102, // MB
    enqueueForUpload: false,
    accept: function (file, done) {
        angular.element(document.getElementById('result')).scope()
            .$apply(function (scope) {
                scope.product.PhotoName = $('#result').val();
            });

        return done();
    }
});

function uploadClicked() {
    var dz = Dropzone.forElement("#dropzone");
    for (var i = 0; i < dz.files.length; i++) {
        dz.filesQueue.push(dz.files[i]);
    }
    dz.processQueue(dz);
    $('#innerQue').empty();
}

在此处修改 dropzone.js：

              addedfile: function (file) {
              file.previewTemplate = createElement(this.options.previewTemplate);
              this.previewsContainer.appendChild(file.previewTemplate);
 rem out -->  //file.previewTemplate.querySelector(".filename span").textContent = file.name;
 add this --> return ($('input[id=result]').val(file.name)); 

角控制器：

function ProductsCtrl($scope, $routeParams, $http, $location) {
$scope.products = [];
$scope.product = {};
$scope.save = function (data) {
    $scope.product = angular.copy(data);
    $http.post('/api/Products', $scope.product)
        .success(function () {
            window.uploadClicked();  <---------------------- Solution
        })
        .error(function (data) {
           // alert(data);
        });
};

MVC 开发人员的额外奖励：

    public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files)
    {
         //Works in Everything and IE10+**

        if (!string.IsNullOrEmpty(Request.Headers["X-File-Name"]))
        {
            string path = Server.MapPath(string.Format("~/Uploads/{0}", Request.Headers["X-File-Name"]));
            Stream inputStream = Request.InputStream;

            FileStream fileStream = new FileStream(path, FileMode.OpenOrCreate);

            inputStream.CopyTo(fileStream);
            fileStream.Close();
        }
   }